Vercel部署React/Next应用后public目录图片无法显示

问题场景 #

本地用Live Server运行React/Next.js应用时，public目录下的图片显示正常，但部署到Vercel后，图片无法加载。代码中使用了相对路径引用图片：

<div className="content">
      <div className="cards">
        {jsonData.map((info) => {
          return (
            <div className="card" key={info.id}>
              <div className="card-head">
                <img src="./06.png" />
                <div className="icon-body">
                  <FiGithub className="git-icon" />
                </div>
              </div>
              <h3>{info.name}</h3>
              <div className="desc">{info.description}</div>
              <div className="stack">{info.stack}</div>
            </div>
          );
        })}
      </div>
    </div>

问题原因 #

Next.js中，public目录是静态资源的根目录，本地Live Server的路径解析规则和Vercel生产环境不同：

• 本地用./开头的相对路径能正确找到public下的文件
• 生产环境中，相对路径会导致资源定位错误，无法找到图片文件

解决方案 #

方案1：改用根路径引用图片 #

直接将图片的src改为以/开头的根路径，因为public目录下的所有资源都可以通过/文件名直接访问：

<div className="content">
      <div className="cards">
        {jsonData.map((info) => {
          return (
            <div className="card" key={info.id}>
              <div className="card-head">
                <img src="/06.png" /> {/* 替换为根路径 */}
                <div className="icon-body">
                  <FiGithub className="git-icon" />
                </div>
              </div>
              <h3>{info.name}</h3>
              <div className="desc">{info.description}</div>
              <div className="stack">{info.stack}</div>
            </div>
          );
        })}
      </div>
    </div>

方案2：使用Next.js官方Image组件（推荐） #

Next.js的next/image组件会自动优化图片加载，同时规范资源路径，使用步骤如下：

1. 导入Image组件：

import Image from 'next/image';

2. 替换原有img标签：

<div className="content">
      <div className="cards">
        {jsonData.map((info) => {
          return (
            <div className="card" key={info.id}>
              <div className="card-head">
                <Image 
                  src="/06.png" 
                  alt="卡片图片" 
                  width={100} // 根据实际图片尺寸设置
                  height={100}
                  className="card-image" // 自定义样式类名
                />
                <div className="icon-body">
                  <FiGithub className="git-icon" />
                </div>
              </div>
              <h3>{info.name}</h3>
              <div className="desc">{info.description}</div>
              <div className="stack">{info.stack}</div>
            </div>
          );
        })}
      </div>
    </div>

修改完成后重新部署到Vercel，图片即可正常渲染，效果与本地一致。

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