javascript - レンダリング時に 404 エラーをスローせずに React で src を動的に設定するにはどうすればよいですか?

const Foo = () => {
  const [src, setSrc] = useState('')
  
  useEffect(() => {
    setSrc('someEndPoint.jpg')
  }, [])

  return <img src={apiUrl + src}>
}

この実装では、コンポーネントはレンダリング時に src をフェッチします。しかし、その前に、img は API のルートを取得しようとして 404 をスローします。これを防ぐ方法はありますか?

src が利用可能な場合にのみレンダリングできます。

以下をお試しください:

return src && <img src={apiUrl + src} />