如何在 Next.js 的组件中加载图像？我必须先构建项目吗？如果是，有没有办法在不先构建的情况下加载图像？无论我尝试什么，我都无法让它发挥作用。
Nextjs：无法从静态文件夹加载图像
IT技术
reactjs
webpack
nextjs
2021-04-21 21:20:46
6个回答
Next.js 可以在根目录中名为 public 的文件夹下提供静态文件，如图像。然后，您的代码可以从基本 URL (/) 开始引用 public 中的文件。
所以，首先添加一个图像public/my-image.png，然后你可以引用它：
<img src="/my-image.png" />
我认为 next.js 会对这个目录有一个监视，所以你不需要start每次在那里放东西时都重新启动你的服务器。
静态目录已被弃用。将文件放在public/static目录中
我找到下一张图片的另一种方式
安装：
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>
使用 Next 10+ 要提供优化的图像：
import Image from 'next/image'
<Image src={'banner.jpg'} alt='Home Page' width={100} height={100} />
将图像放在公用文件夹中。在构建时，所有引用的图像必须存在于公共文件夹中。映像热部署不适用于位于公用文件夹中的映像。您也可以参考带有<Image>标签的跨域图像。
<Image src={'https://www.example.com/banner.jpg'} alt='Home Page' width={100} height={100} />
要允许跨域图像，请确保将以下条目添加到您的 next.config.js
module.exports = {
images: {
domains: ['www.example.com'],
},
}
我喜欢用environment variables. 在 next.js 中，它们很容易在next.config.js文件中设置，如下所示：
// next.config.js
module.exports = {
env: {
PUBLIC_URL: '/',
}
};
然后您可以使用process.env.PUBLIC_URL如下所示直接访问您的公共路径：
<img src={`${process.env.PUBLIC_URL}/my-image.jpg`} />
使用 PUBLIC_URL 环境变量而不是对路径进行硬编码的优点是，当文件排列发生变化时（如在服务器中），您可以使用另一个路径。然后你可以有条件地设置在生产和开发中使用哪个 PUBLIC_URL 值。