Vite+React项目部署Vercel后图片加载失败（404）求助

以下是几个可行的解决方案，你可以根据自己的情况选择：

方案一：用new URL动态解析路径 #

Vite构建时会对静态资源做哈希处理，JSON里的原始相对路径不会被自动解析，所以需要在组件里用new URL来让Vite识别资源路径。

修改图片渲染代码：

<img 
  src={new URL(jobItem.logo, import.meta.url).href} 
  alt="Company logo" 
/>

注意：JSON里的logo路径要相对于当前组件文件来写，比如你的组件在src/components/JobCard.jsx，图片在src/assets/logos/abc.svg，那JSON里的路径应该是../assets/logos/abc.svg，确保路径指向正确。

方案二：将SVG作为React组件导入渲染 #

这种方式完全避开路径问题，直接把SVG当作组件使用：

1. 先修改JSON文件，把logo字段改成对应SVG的标识名，比如：

{
  "jobs": [
    {
      "id": 1,
      "logo": "GoogleLogo",
      // 其他字段...
    }
  ]
}

2. 在组件里导入所有需要的SVG，并创建映射对象：

import GoogleLogo from '../../assets/logos/google.svg';
import FacebookLogo from '../../assets/logos/facebook.svg';

const LogoMap = {
  GoogleLogo,
  FacebookLogo
};

3. 动态渲染SVG组件：

const LogoComponent = LogoMap[jobItem.logo];
<LogoComponent alt="Company logo" />

方案三：使用Vite的public目录存放图片 #

把所有SVG图片放到项目根目录的public文件夹下（没有就新建），比如public/assets/logos/，然后JSON里的logo路径写成绝对路径：

"logo": "/assets/logos/google.svg"

这样Vite构建时会直接把public目录下的资源复制到dist根目录，部署后路径不会出错。但注意这种方式下图片不会被添加哈希后缀，要避免文件名重复导致缓存问题。

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