Next.js中如何使用动态图片路径 仅传图片名时拼接路径展示图片

接口仅返回图片文件名时，可通过以下方案实现路径统一拼接，按需选择即可：

• 推荐优先把图片资源根路径存在Next.js环境变量中，不要硬编码在业务组件里，后续切换CDN、调整资源目录时不需要逐个修改业务代码。客户端可读取的环境变量必须以NEXT_PUBLIC_开头，在项目根目录的.env.local文件中配置即可：

  # 远程CDN/OSS资源配置示例
  NEXT_PUBLIC_IMG_BASE_URL=https://你的图片资源根域名/
  # 如果图片存在项目public目录，直接配置为/即可
  # NEXT_PUBLIC_IMG_BASE_URL=/
  

方案1：渲染时直接拼接（适合少量页面使用的场景） #

直接在img标签的src属性处通过模板字符串拼接前缀即可，注意你原有代码中className="col-md-4"的div标签漏写了闭合尖括号，会触发语法报错，修正后的代码如下：

{this.state.books.map((post, index) => {
  const imgBasePath = process.env.NEXT_PUBLIC_IMG_BASE_URL || '/';
  return (
    <div className="col-md-4" key={post.id || index}>
      <div className="bookimg">
        <img 
          src={`${imgBasePath}${post.image}`} 
          alt={post.bookName || '书籍封面'}
        />
      </div>
    </div>
  )
})}

方案2：抽离公共工具方法（适合全项目多处使用图片的场景） #

把路径拼接逻辑抽成全局可复用的工具函数，后续如果需要给图片统一加尺寸参数、水印、容错处理，只需要修改这一处代码即可，不用全项目改动。
首先在utils目录下新建图片处理工具文件：

// utils/image.js
/**
 * 生成图片完整访问路径
 * @param {string} filename 接口返回的图片文件名
 * @returns 完整可访问的图片地址
 */
export const getImageFullUrl = (filename) => {
  const basePath = process.env.NEXT_PUBLIC_IMG_BASE_URL || '/';
  // 自动补全/去除多余斜杠，避免出现路径双斜杠、缺斜杠的问题
  return `${basePath.replace(/\/$/, '')}/${String(filename).replace(/^\//, '')}`;
}

在需要使用的组件中引入调用即可：

import { getImageFullUrl } from '@/utils/image';

// 渲染逻辑
{this.state.books.map((post, index) => {
  return (
    <div className="col-md-4" key={post.id || index}>
      <div className="bookimg">
        <img 
          src={getImageFullUrl(post.image)} 
          alt={post.bookName || '书籍封面'}
        />
      </div>
    </div>
  )
})}

方案3：配合Next.js内置Image组件使用（推荐生产环境用） #

如果要使用Next.js自带的图片优化能力（懒加载、自动格式压缩、尺寸适配），除了按上面的逻辑拼接路径，还需要在next.config.js中配置允许加载的图片域名，否则远程图片会被拦截无法加载：

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '你的图片资源根域名', // 示例：img.xxx-cdn.com
      },
    ],
  },
};

module.exports = nextConfig;

组件中使用时把原生img标签替换为Image组件即可：

import Image from 'next/image';
import { getImageFullUrl } from '@/utils/image';

{this.state.books.map((post, index) => {
  return (
    <div className="col-md-4" key={post.id || index}>
      <div className="bookimg">
        <Image 
          src={getImageFullUrl(post.image)} 
          alt={post.bookName || '书籍封面'}
          width={200}
          height={300}
        />
      </div>
    </div>
  )
})}

注意点：如果接口返回的文件名可能为空，建议在工具函数里加个默认兜底图的逻辑，避免出现裂图。

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