next.js引入图片404问题

1.场景

next.js项目中，引入图片报404问题，路径是对的，但无法正确找到图片

2.原因

没有写入相应规则，比如react中，webpack自己已经默认做了配置，但next.js中需要手动配置

**最好将图片放入最外层的static文件中

引入方式

<img src="/static/image/10440.jpg" alt="icon" />

3.配置

3.1安装url-loader

yarn add url-loader

3.2 在next.config.js文件中写入以下代码：

就是将react中webpack的配置复制了过来

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]",
      },
    });

示例：