next.js export 静态 Image src 图片路径
目录
默认情况，当 export 静态网站时，图片因为路径问题无法正常显示。
处理方法：自定义一个 image loader
- next.config.js 中添加一条配置
const nextConfig = {
images: {
loader: "custom",
},
};
- 项目页面中添加一个函数
function imageLoader({ src }) {
return `/images/${src}`; // REPLACE WITH YOUR IMAGE DIRECTORY (in /public dir)
}
- 使用
Image标签时，添加一个loader参数
<Image
src="icon.png"
loader={imageLoader}
width={14}
height={14}
alt="icon"
/>
参考：