next-images 错误：模块解析失败：意外字符“�”答案

【问题标题】：next-images Error: Module parse failed: Unexpected character '�'next-images 错误：模块解析失败：意外字符“�”
【发布时间】：2021-08-11 17:25:40
【问题描述】：

我正在尝试使用下一个图像加载图像：当我输入图像名称时，它工作正常：

//Working
<Image src={require(`../../images/exampleImage.jpg` )}/>

但我不希望我想要这样的动态网址：

//Not working
<img src={require(`../../images/${image}.jpg` )}/>

我得到这个错误：

错误：模块解析失败：意外字符 '�' (1:0) 您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。见https://webpack.js.org/concepts#loaders （此二进制文件的源代码省略）

我的 next.config.js 文件：

const withImages = require("next-images");
module.exports = withImages();

我也试过这个配置：

module.exports = {
  webpack: (config, options) => {
    config.module.rules.push(
      {
        test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
        loader: 'url-loader?limit=100000' 
      }
    )
    return config
  },
}

尝试了很多方法，但似乎都不起作用，请帮忙，谢谢

【问题讨论】：

我不确定是否有动态导入路径。根据图像的数量，我会正常导入它们。如果数量很大，那么最好根本不导入并将它们作为静态文件提供，这样您就可以构建动态路径。
@EyalC 我不能这样做，因为我在我的网站中实现了图像上传功能，用户可以上传图像并将它们存储在 ./images 上，所以我需要一个动态导入路径
您是否将上传的图片存储在应用程序的public 文件夹下？在运行时添加到public 文件夹的文件将不可用； Next.js 只会提供构建时存在的资产。请尝试使用第三方服务来存储您的图像。

标签： javascript reactjs webpack next.js next-images

【解决方案1】：

如果您愿意使用file-loader 库来处理项目中的图像。您可以在 webpack 上安装库并设置如下规则：

...
config.module.rules.push(
  {
    test: /\.(png|jpeg|jpg|gif|svg)$/,
    use: {
      loader: "file-loader"
    },
  }
),

您可以在webpack 上的文档中阅读有关文件加载器的更多信息

【讨论】：

我收到此错误：错误：找不到长文件名为 ${image} 的模块 './c7844f96-7cb7-43cf-ac34-d407fd32ce3eb.jpg'
太好了，您现在可以删除这些选项。我会更新我的答案以反映这一点。
好的，现在我没有收到错误，但图像没有加载
图片有这个路径：localhost:3000/44044f6c6e6b4f631ff968d1a2ed9264.jpg 这是无效路径
我建议你有一个后端服务和一个像 s3 这样的云存储桶来处理这样的事情。

【解决方案2】：

Webpack 很可能会在构建时尝试查找并包含您的图像。这不适用于从变量中读取名称。您有 2 个选择：

以不同方式管理图像
如果您的图像列表有限（或相当短），只需全部导入并使用某种开关来控制显示哪个图像。

【讨论】：

“以不同方式管理图像”是什么意思？
抱歉措辞混乱，我指的是 cmets 中已经提到的内容： > 尝试使用第三方服务来存储您的图像。