Nextjs:无法从静态文件夹加载图像

Question

如何在Next.js中的组件中加载图像？我是否必须先建立项目？如果是,有没有办法加载图像而不先建立？无论我尝试什么,我都无法让它发挥作用.

Answer 1

从 Next.js v11 开始，现在可以直接生成import图像，无需任何额外的配置或依赖项。官方示例（评论我的）：

import Image from 'next/image'
import profilePic from '../public/me.png'

function Home() {
  return (
    <>
      <h1>My Homepage</h1>
      <Image src={profilePic} alt="Picture of the author" />
      {/* <img src={profilePic.src} alt="Picture of the author" /> */}
      <p>Welcome to my homepage!</p>
    </>
  )
}

export default Home

文件：next/image

Answer 2

来自文档:

只需将文件放在static目录中,然后就可以在应用程序中引用它们,如:

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

我认为next.js会在这个目录上有一个监视器,所以我不认为你start每次在那里放东西都需要重新启动服务器.

但是当然你的生产版本会更新.build每次在应用程序中更改内容时都需要它.

Answer 3

我找到下一张图片的另一种方式

安装： 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>

Answer 4

静态目录已被弃用。将文件放在public/static目录中