Image is missing required “src” property:のエラー
エラーの状況
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タグを出力しないようにしました。
めでたし、めでたし。
関連記事

Application error: a client-side exception has occurred (see the browser console for more information).のエラー
next.js 以下の行でエラーが発生するconsole.log("user!. ...

amplifyのコンソールからアプリが削除できない場合
トラブルのケース その1 AWS Amplifyのアプリを削除しようと、アクショ ...

DistributionDir とは? (Zipping artifacts failed. This is often due to an invalid distribution directory path.のエラー)
検索で引っ掛からなかったので、書きました。amplify/.config/pro ...

nextjs 検索と抽出のサンプル
概要 nextjsで検索と抽出を行うためのサンプルです。エラーは出ないようになっ ...

> Build optimization failed: found page without a React Component as default export in pages/xxxxxxx のエラー
動作環境 nextjs 解決方法 pages/xxxxx.tsx のファイルの中 ...