图像在下一个 js 中不起作用。给出错误“主机名”答案

【问题标题】：image doesn't work in next js. gives error 'hostname'图像在下一个 js 中不起作用。给出错误“主机名”
【发布时间】：2021-07-13 05:49:42
【问题描述】：

在使用下一个 js Image 时，会出现错误

下一个.config.js：

module.exports = {
  images: {
    domains: ['localhost'],
  },
};

错误图片：

我不太明白如何设置 img 以及下一个 js 想要我做什么

图片组件代码：

        <Image         
        alt={element.show_name_eng}
        src={'\\' + element.show_picture_1980} - throws an error if not - //

but it works without problems if you use picture + source
        width={200}
        height={100}/>

【问题讨论】：

标签： javascript reactjs next.js

【解决方案1】：

您应该在此代码中添加图像的基本 URL

module.exports = {
  images: {
    domains: ['localhost','https://example.cm'],
  },
};

【讨论】：

【解决方案2】：

根据next/image documentation，如果要从外部 URL 拉取图像，则必须将图像 URL 域添加到 next.config.js 文件中的允许域数组中。

例如，如果您的图像src 是https://res.cloudinary.com/user/image/upload/v111/memes/dog.jpg

那么您的next.config.js 文件应如下所示：

module.exports = {
  images: {
    domains: ['localhost','res.cloudinary.com'],
  },
};

【讨论】：