Image is missing required “src” property:のエラー

8月 3, 2022

エラーの状況

amplifyでnextjsのImageタグを使ってブラウザに表示したら、エラーが発生した。

エラーの原因

Imageタグのsrcの属性が空になっている場合、このエラーが出ます。

具体例

以下の場合、srcが空であるとエラーが発生します。

<Image src={imgUrl} alt="logo" width="40" height="40"/>

エラーを回避したい場合は、以下のようにして解決することができます。

      {imgUrl
        ? <Image src={imgUrl} alt="logo" width="40" height="40"/>
        : ""
      }

imgUrlが空の場合は、Imageタグを出力しないようにしました。

めでたし、めでたし。