Next.js中仅返回图片文件名时如何拼接域名前缀加载资源

直接说结论：不要在单个组件内部硬编码存储主机地址，这种方式维护成本极高，域名变更时需要逐文件修改，极易漏改导致线上图片404。

下面是按推荐优先级排序的实现方式： #

1. 优先用Next.js内置环境变量统一配置 #

这是成本最低、最符合框架设计的方案，不需要额外封装组件就能实现全项目统一配置：

• 在项目根目录新建.env.local文件，写入图片服务的根路径，注意：变量名必须以NEXT_PUBLIC_开头，否则客户端侧代码无法读取：

NEXT_PUBLIC_IMAGE_BASE_URL=https://your-resource-domain.com/image/

• 渲染图片时直接拼接变量即可：

<img src={`${process.env.NEXT_PUBLIC_IMAGE_BASE_URL}${post.image}`} alt={post.title} />

这种方式的优势非常明显：开发、测试、生产环境可以配置不同的资源域名，切换环境不需要修改任何业务代码，后续要改资源根路径只需要修改环境变量这一处。 #

2. 封装通用图片组件（适合有统一图片处理需求的场景） #

如果你的图片除了路径拼接，还需要统一做懒加载、错误兜底、占位图、尺寸适配，甚至要接入Next.js自带的图片优化能力，可以封装一个全局通用的图片组件：

// components/BaseImage.jsx
const IMAGE_BASE = process.env.NEXT_PUBLIC_IMAGE_BASE_URL;

export default function BaseImage({ src, alt = "", ...rest }) {
  // 兼容接口返回完整路径的老数据，已经是http开头的地址就不重复拼接
  const realSrc = src.startsWith('http') ? src : `${IMAGE_BASE}${src}`;
  // 要使用Next.js图片优化的话，把下面的img替换为next/image即可
  return <img src={realSrc} alt={alt} loading="lazy" {...rest} />;
}

所有需要渲染图片的位置直接引入这个组件即可，用法和原生img标签完全一致，后续要加统一的图片逻辑只需要改这一个文件：

import BaseImage from '@/components/BaseImage';

// 业务代码中使用
<BaseImage src={post.image} alt={post.title} className="post-cover" />

3. 接口响应层统一拼接（适合业务逻辑简单的场景） #

如果项目里用到这个接口返回图片的位置非常多，不想每次渲染都写拼接逻辑，可以直接在axios的响应拦截器里提前把图片字段处理成完整路径，业务层拿到数据直接用即可：

// axios全局配置中添加响应拦截器
axios.interceptors.response.use((response) => {
  const { data } = response;
  // 针对对应接口的返回结构，提前拼接图片路径
  if (Array.isArray(data.trending)) {
    data.trending = data.trending.map(item => ({
      ...item,
      image: item.image.startsWith('http') 
        ? item.image 
        : `${process.env.NEXT_PUBLIC_IMAGE_BASE_URL}${item.image}`
    }))
  }
  return response;
})

不推荐的写法 #

就是示例中在单个组件内部定义变量存主机地址的方式，除了前面说的维护成本高，还会导致不同组件可能配置不一致，测试、生产环境切换时极易出现资源地址写错的问题。

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