next.js 画像が表示されません。

Question

前提・実現したいこと

現在ホームページの開発を行なっています。
使用しているフレームワークやライブラリはnext.jsとreact.jsです。
Google cloud platformでデプロイを行なってステージングをしている段階なのですが、ページを確認してみると画像が表示されていません。デベロッパーツールでエラーを確認してみると以下のようなものが表示されました。

発生している問題・エラーメッセージ

❌ GET  “画像のpath” 504

ソースコード

import Image from ‘next/image’

<Image src=‘images/path.png’ width={~} height={~} />

試したこと

next.jsを使用していますのでimgタグではなくImageコンポーネントを使用してみたり、pathは(publicをパスに入れていないかなど)何度も確認しましたが間違えはなさそうでした。

エラーはタイムアウトを示しているようだったので写真の容量も確認しましたが大きすぎるものはなにもありませんでした。また、時間をおいても解決はしなかったです。(デプロイをしすぎていることによってエラーが出ることがあるのでありますか？)

ちなみに写真の中の一部はimgタグを使用していても表示されることがありました。

補足情報

FWのバージョン
next:10.2.0

Comments

[FKM]

imagesディレクトリはプロジェクトのディレクトリから見てどこにありますか？

[mimizu16]

こんな感じのファイル構造です。

public
|- images
src
|- components
　　|- imagesを呼び出しているファイル
|-...
•
•
•

[mimizu16]

わかりにくくて申し訳ありません。

[FKM]

大元のプロジェクト用のディレクトリの配下にpublicがあるということですか？

[mimizu16]

そういうことです

[hoshi-takanori]

画像の URL を直接ブラウザで開いたら見えてるってことですよね。
公式サンプルのように、src の先頭に / をつけて <Image src=‘/images/path.png' 〜> としてみては。
https://nextjs.org/docs/api-reference/next/image

[mimizu16]

やってみましたが、できませんでした。回答ありがとうございます。
ちなみに、画像はurlではなくpathで指定しているので直接ブラウザで開くというのはできないと思っていたのですができるのでしょうか？

[mimizu16]

解決しました。ありがとうございました

Answer 1

import Image from 'next/image'

<Image src='/images/path.png' width={~} height={~} />

試しにですが、上記のようにsrcのパスを絶対パスにしてみてください。

プロジェクトのpublicフォルダにあるファイルはnext build後のnext startによるサーバー稼働やnext exportでの静的ファイル生成では、パスのトップに対応するようになっています。
Imageを使っているURLが/のようなトップなら相対パスでも平気だと思いますが、
例えば/about/1みたいな下層だと相対パスでURLを構築して失敗するかもしれません。

Comments

[mimizu16]

Web上に画像をあげていないのですがfirebase storage などで上げたほうがいいのでしょうか？

[mimizu16]

nextjsのImageコンポーネントなので相対パスや絶対パスというような概念はあるのですか？知識不足で申し訳ありません。

[attakei]

> Web上に画像をあげていないのですがfirebase storage などで上げたほうがいいのでしょうか？
「どうデプロイしているか」「どう動かしているか」が書かれていないので、なんとも言えません。
ただ、自分が知っている範囲のNext.jsベースの実装においてはpublic配下のリソースはCloud Storageに上げることは考えないと思っています。

> nextjsのImageコンポーネントなので相対パスや絶対パスというような概念はあるのですか？知識不足で申し訳ありません。

https://nextjs.org/docs/api-reference/next/image
ドキュメントにもある通り、Imageコンポーネントのsrcは画像のパスまたはURLとなっています。
「パス」という表記になっている以上、URLとして持つパスの要素（絶対・相対）を持つのは自然と解釈しています。

追える範囲でImageコンポーネントの実装を見る限りでは、結局のことろ内部でimgタグをレンダリングしてるだけみたいです。
https://github.com/vercel/next.js/blob/c922c6a3f4d4e463cce4713d9cf8f61c13b3fac8/packages/next/client/image.tsx#L274

[mimizu16]

解決しました。ありがとうございました。

Answer 2

Nextでは標準実装のコンポーネントだったみたいですね。失礼しました。

##　以下はreact-nativeなどの話です

これ、イメージタグじゃなくて、Imageという子コンポーネントですよね？
srcプロパティはコンポーネント内に記述されたimgテンプレートに書かないと反映されません。

//どこかにこんな感じのテンプレートがあるはず
const Image = ()=>{
    return(
     <img src=‘images/path.png’ width={~} height={~} />
    )
}

//これはただの子コンポーネントなので、valueプロパティ以外は反映されない
<Image />

Comments

[mimizu16]

回答していただきありがとうございます。
まず説明不足で申し訳なかったのですが、この Image はnext.jsの提供しているコンポーネントです。最適化を行なってくれるなどの利点があり導入しています。
そのため、src width height を指定してあげると property としてnextの提供しているImageコンポーネントに渡されてコンポーネント内のimgタグに埋め込まれているはずです。公式ページでも同様の記述をしていました。
また、firebase.jsonのhostingのpublicがoutになっていたのでそれが原因かもしれません。

[FKM]

src='xxxxx.png'で見えているものもあるということですか？

[mimizu16]

ごめんなさい、どういうことでしょうか？

[FKM]

動的に制御していない画像をimagesフォルダに置いた場合です。

[mimizu16]

えっと、src='xxxxx.png'でみえているというのはどういう事でしょうか。
画像は全て映っていません

[mimizu16]

解決しました。回答してくださりありがとうございました。

Answer 3

一つのドメインで二つ以上のものを表示するためにbasepathをnext.config.jsで設定していましたがImageコンポーネントでは自動でpathが設定されないことが判明しました。それだと思われます。