生成AIが作ったサイトの画像が表示されない・壊れたリンクになる理由

生成AIに作らせたサイトのプレビューでは画像がちゃんと表示されていたのに、Studioなど別の場所に持ち込んだ途端、真っ白や壊れたアイコンになってしまう——よくある悩みのひとつです。

この記事では、生成AIが書いたHTMLで画像が表示されなくなるよくある原因と、取り込む前に確認しておきたいポイントを整理します。

よくある原因

画像が表示されなくなる原因はいくつかありますが、特に多いのが次の4つです。

• 画像のsrcが相対パス（例：images/xxx.jpg）になっており、画像フォルダを一緒に渡していない
• 生成AIが、実在しない仮のURL（プレースホルダー）をそのまま書いている
• 他サイトの画像を直接参照しており、参照元の制限で表示できなくなっている
• 自分のパソコン上だけで開けるファイルパス（file://など）を書いてしまっている

直し方

相対パスやプレースホルダーが原因の場合は、実際に使いたい画像を自分で用意し、持ち込み先（Studioなど）に直接アップロードしたうえで、その画像に差し替えるのが確実です。パスの文字列だけを直そうとするより、画像自体を実データとして持たせてしまったほうが、あとから場所を移しても崩れにくくなります。

まとめ

画像が表示されなくなる原因の多くは、生成AIが「動作確認した環境の中でだけ通じるパス」を書いていることにあります。持ち込む前に画像のsrcを一通り確認し、必要なら実データに差し替えておくと、持ち込み後のトラブルを減らせます。

生成AIが書いたコードの中で、あとから自分で直せるようにしておきたい範囲は生成AIで作ったサイトの文章・画像を、あとから自分で直せるようにしておくコツにまとめています。