next/image 部署后不从外部 URL 加载图像答案

【问题标题】：next/image does not load images from external URL after deploymentnext/image 部署后不从外部 URL 加载图像
【发布时间】：2021-03-15 08:34:47
【问题描述】：

我使用 Next.js Image 组件进行图像优化。它在开发环境中运行良好，但在生产环境中无法从外部 URL 加载图像。

我能做什么？

【问题讨论】：

标签： reactjs next.js nextjs-image

【解决方案1】：

You need to set configuration on the next.config.js file first

示例：

关于next.config.js

module.exports = {
    images: {
        domains: ['images.unsplash.com'],
    },
}

在 pages/your_page_file.tsx

上

<Image
    alt="The guitarist in the concert."
    src="https://images.unsplash.com/photo-1464375117522-1311d6a5b81f?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=2250&q=80"
    width={2250}
    height={1390}
    layout="responsive"
/>

【讨论】：

这应该是公认的答案。

【解决方案2】：

为了将来的参考，我在将 next.js 站点部署到 Netlify 后遇到了同样的问题。直到后来，阅读我的日志，我才发现

在 next.config.js 中设置的图像域被忽略。请改为将环境变量 NEXT_IMAGE_ALLOWED_DOMAINS 设置为“cdn.sanity.io”

所以这可能需要注意。在我看到它之前，我将这个next-sanity-image插件https://www.sanity.io/plugins/next-sanity-image插入我的页面，这也绕过了这个问题

【讨论】：

你拯救了我的夜晚！
实际上，它终于在本地构建上工作了，但在服务器上构建的 docker 上仍然存在同样的问题！
嗯，我没有使用Docker所以我不知道是否有针对这种情况的额外配置。你在 netlify 或插件上使用了 env 变量？
我有一个用于 nextjs 的家庭服务器，我用 docker 容器部署了它。所有环境。变量（公共/私有）工作正常，但我无法使此图像受信任域工作。我什至在我的本地机器上尝试了这个 docker 容器，在那里我也遇到了同样的错误。尽管有 docker，但当我使用 yarn start 执行我的项目时，它们工作得很好
@op_exchanger 您必须在 netlify 本身上添加变量。以下是这样做的步骤 - docs.netlify.com/configure-builds/environment-variables/…

【解决方案3】：

在您的下一个配置中添加并声明您的域，next.config.js：

module.exports = {
    reactStrictMode: true,
    images: {
        domains: ["yourDomain.com"],
        formats: ["image/webp"],
    },
};

配置文件next.config.js 应位于项目的根目录中。

最后，即使在开发模式下也要重新启动项目。

【讨论】：