部署后，next/image不会从外部URL加载图像

html5 • • 问答

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

我能做什么？

回答

您需要先在 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"
/>

以上是部署后，next/image不会从外部URL加载图像的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>