部署后，next/image无法从外部URL加载图像

Question

部署后，next/image无法从外部URL加载图像

reactjsnext.jsnextjs-image

45

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

我该怎么办？

- Mahdi

我放弃了Next.js的Image组件，改用img标签，虽然没有经过优化，但很简单。 - Nicholas Jela

6个回答

10

如果您想在Next.js应用程序中显示来自互联网的任何图像，则可以使用以下配置：

const nextConfig = {
    reactStrictMode: true,
    i18n,
    sassOptions: {
        includePaths: [path.join(__dirname, 'src/styles')],
        prependData: `@import "variables.scss";`,
    },
    images: {
        remotePatterns: [
            {
                protocol: 'https',
                hostname: '**',
                port: '',
                pathname: '**',
            },
        ],
    },
}

- Tugrul Yildirim

你应该提到这个config.js在生产环境下不起作用。 - Nicholas Jela

对我来说，它是如何起作用的？ - Tugrul Yildirim

7

在你的next.config.js文件中添加并声明你的域名。

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

配置文件next.config.js应该放在项目的根目录下。

最后，在dev模式下也需要重新启动项目。

- saeed latifi

6

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

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

因此这可能是需要注意的事项。在我看到这个之前，我使用了next-sanity-image插件https://www.sanity.io/plugins/next-sanity-image来解决这个问题。

- op_exchanger

1

实际上，本地构建最终成功了，但在服务器上构建的 Docker 仍然存在相同的问题！ - Farrokh Rostami Kia

1

哦，我没有使用Docker，所以我不知道在这种情况下是否有额外的配置。你是在Netlify上使用环境变量还是插件？ - op_exchanger

我有一个用于Next.js的家庭服务器，我使用Docker容器部署了它。所有环境变量（公共/私有）都正常工作，但我无法使此镜像信任域名。我甚至在本地机器上尝试了这个Docker容器，但我也遇到了同样的错误。尽管如此，在使用yarn start执行我的项目时，它们可以正常工作。 - Farrokh Rostami Kia

1

@op_exchanger 你需要在Netlify上添加变量。以下是操作步骤 - https://docs.netlify.com/configure-builds/environment-variables/#declare-variables - wrogn

@FarrokhRostamiKia 你尝试确保将 next.config.js 复制到 Docker 环境中了吗？在那个线程中发现了这个问题，其中提供了一些有用的建议。 - adamduncan

1

我注意到你在部署后遇到了next/image无法加载外部图片的问题。我之前也遇到过类似的问题，经过一些调整，以下是对我有效的配置：

/** @type {import('next').NextConfig} */
const path = require('path')

const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '**',
        port: '',
        pathname: '**',
      },
    ],
  },
}

module.exports = nextConfig

随便试试这个配置，如果能解决你的问题，请告诉我。如果有其他问题或遇到进一步的困难，我会在这里帮助你的！

- kevin biantuadi

-4

对我来说，只需要添加广告拦截器扩展程序。

- JoBaHP

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Athachai · Accepted Answer

首先，您需要在next.config.js文件中进行配置设置。

例如：

在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"
/>

对于12.3.0以上的版本，这是被接受的方法：

module.exports = {
    images: {
        remotePatterns: [
            {
                protocol: 'https',
                hostname: 'assets.example.com',
                port: '',
                pathname: '/account123/**',
            },
        ],
    },
}

参考https://nextjs.org/docs/messages/next-image-unconfigured-host