超有效的解決方案：Failed to load resource: the server responded with a status of 404 (Not Found)

Posted 2021-05-16 Dream丶Killer

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;
    }
}

---

❤运行项目，图片引入成功！开森~❤