Nextjs: Unable to load images from static folder

问题

How can I load images in a component in Next.js? Do I have to build the project first? If yes, is there a way to load the images without building first? I cannot get this to work, no matter what I try.

回答1:

from the docs:

Just place your files in static directory then you can reference them in your app like:

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

I think next.js will have a watch on this directory so I don't think you need to restart your server every time you put something in there.

But of course when your production build will get updated. You need to build it every time you change something in your app.

回答2:

The static directory has been deprecated. Place files in public/static directory

回答3:

Another way I find out Next Images

installation: npm install --save next-images

or yarn add next-images

Usage:

Create a next.config.js in your project

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

Optionally you can add your custom Next.js configuration as parameter

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

And in your components or pages simply import your images:

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

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

export default () => <div>
  <img src={myImg} />
</div>

来源：https://stackoverflow.com/questions/49435368/nextjs-unable-to-load-images-from-static-folder

标签

reactjs

Webpack

nextjs