Failed to load resource: the server responded with a status of 404 (Not Found)

Failed to load resource: the server responded with a status of 404 (Not Found)

问题描述：

在nextjs项目里想要引入图片，地址都是对的，但是最后报404错误

 

---

 

解决办法：

1、在项目根目录添加一个static文件夹，在static中创建一个images文件夹，将图片放在images文件夹中。

 

2、引入方式

<img src="/static/images/bg.jpg" alt="bgImage" />

 

3、安装url-loader

yarn add url-loader

 

4、在next.config.js文件写入相应配置

module.exports = {
webpack: (config) => {
config.module.rules.push({
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve("url-loader"),
options: {
limit: 10000,
name: "static/media/[name].[hash:8].[ext]",
},

});
return config;
}
}

运行项目，图片引入成功！