next/image 部署后不从外部 URL 加载图像 [英] next/image does not load images from external URL after deployment

问题描述

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

I use the Next.js Image component for image optimization. It works great on dev but it doesn't load images from external URLs in production.

我能做什么?

推荐答案

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

这篇关于next/image 部署后不从外部 URL 加载图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！