<h2 id="h8d027c8ed3">はじめに</h2><p>Next.jsのImageコンポーネントで画像が表示されない<br>事態が起こってしまったので、調べてみた。</p><h2 id="h86672c8acc">本題</h2><ul><li>表示される例</li></ul><p>ローカルに画像ファイルを持っている場合</p><pre><code>const imagePath = "./image.png"

&lt;Image
  src={imagePath}
  width={100}
  height={80}
  alt={"画像"}
/&gt;</code></pre><ul><li>表示されない例</li></ul><p>外部サーバに画像ファイルがある場合</p><pre><code>const imagePath = "https://example.com/img/image.png"

&lt;Image
  src={imagePath}
  width={100}
  height={80}
  alt={"画像"}
/&gt;</code></pre><p><br></p><h2 id="had0b1b94af">解決方法</h2><p><code>next.config.js</code>に以下を追記。</p><pre><code>module.exports = {
  images: {
    domains: ["example.com"] // 画像ファイルがあるドメインを指定
  },
};</code></pre>

絶対パスの画像パスではImageコンポーネントは表示されない。

<h2 id="h8d027c8ed3">はじめに</h2><p>おはようございます。こんにちは。こんばんは。<br>Watatakuと申します。技術ブログを作りました。よろしくお願いします。<br><br>今流行りのJamstackという手法で開発しています。<br>ホスティングはVercelを使用しています。<br><br>初回の今回はこのブログのことを書いていきます。<br><a href="https://github.com/watataku8911/watataku-blog" target="_blank" rel="noopener noreferrer">ソースコード</a></p><h2 id="hed900658dc">環境</h2><ul><li>React:17.0.2</li><li>Next.js:v.12.0.7 (7/11日現在 : v.13.4.3)</li><li>typescript:v4.5.4</li></ul><h2 id="h49af616052">このブログで書いていくこと</h2><p>フロントエンドのことを中心にWeb（Jamatack）について書いていきます。</p><h2 id="hbd7b1c9fdb">このブログを作成した目的</h2><p>単純にブログを作りたかったからw<br>以上。<br><br>・・・ではなく、真面目に回答していくと上記の動機もありますが他に下記に記載の理由があります。</p><ul><li>将来の自分の為の知識の貯蔵</li><li>自分と同じ問題にぶち当たっている人に対して、解決策を紹介したい</li><li>文章力向上の為</li></ul><p><br>投稿頻度はさほど多くはないとは思いますがよろしくお願いします。<br></p>

T.W

絶対パスの画像パスではImageコンポーネントは表示されない。

技術ブログを作ったよ。