reactjs - next/image 部署后不从外部 URL 加载图像

Question

我使用 Next.jsImage组件进行图像优化。它在 dev 上工作得很好，但它不会在生产中从外部 URL 加载图像。

我能做些什么？

Answer 1

您需要先在 next.config.js 文件上设置配置

例子：

在next.config.js上

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

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

Answer 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插入我的页面，这也绕过了这个问题

Answer 3

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

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

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

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