next/image 部署后不從外部 URL 加載圖像

Question

我使用 Next.js Image組件進行圖像優化。 它在 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

將您的域添加並聲明到下一個配置

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

在項目根目錄的 next.config.js 中

即使在開發模式中也可以重新啟動項目