web-dev-qa-db-ja.com

Nextjs：静的フォルダーから画像を読み込めません

Next.jsのコンポーネントに画像を読み込むにはどうすればよいですか？最初にプロジェクトをビルドする必要がありますか？はいの場合、最初にビルドせずにイメージをロードする方法はありますか？何をしようとしても、これを機能させることはできません。

reactjswebpacknextjs
7
Vaggelis Stefanakis

ドキュメントから：

ファイルをstaticディレクトリに配置するだけで、次のようにアプリで参照できます。

<img src="/static/my-image.png" />

Next.jsはこのディレクトリを監視するので、サーバーに何かを置くたびにサーバーをre startする必要はないと思います。

しかし、もちろん、本番ビルドが更新されるとき。アプリで何かを変更するたびに、buildする必要があります。

13
Tomasz Mularczyk

静的ディレクトリは廃止されました。 public/staticディレクトリにファイルを配置します

6
c. wait

私が見つける別の方法 次の画像

インストール：npm install --save next-images

またはyarn add next-images

使用方法：

next.config.jsプロジェクト内

// next.config.js
const withImages = require('next-images')
module.exports = withImages()

オプションで、カスタムNext.js構成をパラメーターとして追加できます。

// next.config.js
const withImages = require('next-images')
module.exports = withImages({
  webpack(config, options) {
    return config
  }
})

そして、あなたのコンポーネントまたはページであなたの画像を単にインポートしてください：

export default () => <div>
  <img src={require('./my-image.jpg')} />
</div>

または

import myImg from './my-image.jpg'

export default () => <div>
  <img src={myImg} />
</div>
3
Md. Jamal Uddin