如何让Next.js Image组件生成带域名的完整图片URL？

解决Next.js 组件生成完整域名URL的问题 #

方法1：通过next.config.js配置assetPrefix（推荐） #

如果应用部署在固定域名下，直接在配置文件中设置资源前缀，让所有Image组件生成的图片路径自动带上完整域名：

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 替换为你的实际域名
  assetPrefix: 'https://example.com',
  images: {
    unoptimized: false, // 保持图片优化默认开启状态
  },
}

module.exports = nextConfig

配置完成后，组件生成的src和srcset都会自动追加域名前缀，示例效果：

<img src="https://example.com/_next/image?url=%2Fimg%2Fexample.png&amp;w=3840&amp;q=75" ...>

方法2：自定义Image组件（适配多环境场景） #

如果需要根据开发/生产环境动态切换域名，可以封装一个自动拼接域名的自定义组件：

步骤1：创建自定义组件 #

// components/Image.js
import NextImage from 'next/image'

const Image = (props) => {
  // 从环境变量读取域名，默认值替换为你的开发环境地址
  const baseUrl = process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000'
  // 仅对相对路径的图片添加域名前缀
  const fullSrc = props.src.startsWith('/') ? `${baseUrl}${props.src}` : props.src
  
  return <NextImage {...props} src={fullSrc} />
}

export default Image

步骤2：配置域名白名单 #

由于将本地路径转为了远程URL，需要在next.config.js中允许该域名：

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: process.env.NEXT_PUBLIC_APP_URL?.startsWith('https') ? 'https' : 'http',
        hostname: new URL(process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000').hostname,
        pathname: '/**',
      },
    ],
  },
}

module.exports = nextConfig

步骤3：替换原生组件使用 #

import Image from '@/components/Image'

<Image src="/img/example.png" />

方法3：静态导出场景（next export） #

如果应用是静态导出模式，除了配置assetPrefix，可根据需求设置图片优化开关：

// next.config.js
const nextConfig = {
  assetPrefix: 'https://example.com',
  images: {
    unoptimized: true, // 关闭图片优化，直接使用原始路径
  },
  output: 'export',
}

module.exports = nextConfig

内容的提问来源于stack exchange，提问作者R Sharma