React项目部署至Vercel后图片及背景无法显示问题求助

• 检查图片引用路径

  • 若图片放在项目根目录的public文件夹下，必须用绝对路径引用，比如 <img src="/images/avatar.png" alt="avatar" />，不要使用./images/avatar.png这类相对路径——Vercel部署后，public文件夹会映射为站点根路径。
  • 若图片放在自定义文件夹（如根目录下的images），需通过import方式引入资源，Webpack会自动处理路径：

    import bannerImg from './images/banner.png';
    // 组件中使用
    <img src={bannerImg} alt="banner" />
    

• 排查部署时的文件忽略规则

  • 打开项目根目录的.gitignore文件，确认图片文件夹（如images/）没有被加入忽略列表，否则Vercel部署时不会上传这些文件，直接删除对应的忽略规则即可。
  • 查看Vercel项目的部署设置，确保没有自定义的构建忽略规则，保证图片目录被包含在构建产物中。

• 统一文件名大小写

  • Vercel服务器严格区分文件名大小写，本地开发环境通常不区分。比如本地写/images/Logo.png但实际文件是/images/logo.png，本地能正常显示，部署后会返回404，需统一文件名的大小写。

• 验证图片格式与大小

  • 尝试将特殊格式的图片（如罕见矢量图格式）转换为PNG/JPG等通用格式，同时压缩过大的图片，避免因资源加载超时或格式不支持导致无法显示。

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