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

• 修正public文件夹资源的引用路径
  React项目部署后，public文件夹会作为网站根目录，因此img标签的src不需要加public/前缀，直接使用根相对路径即可。修改后的代码如下：

  import React from "react";
  import Loader from "./StyledHeader";
  
  const HeroHeader = () => {
    return (
      <div>
        <div className="hero-img">
          <img src="/images/pasta-image.jpg" alt="pasta" />
          <div className="hero-text">
            <h1>Checkout</h1>
            <Loader />
            <h1>Recipes</h1>
          </div>
        </div>
      </div>
    );
  };
  
  export default HeroHeader;
  

  注意：要确保public/images/pasta-image.jpg路径真实存在，且文件名（包括大小写）完全匹配——Vercel部署环境基于Linux，对文件名大小写敏感，而本地Windows系统可能不区分，这是常见的隐性问题。

• 验证导入式引用的正确写法
  如果采用导入图片的方式，需保证导入路径与文件实际位置一致。假设图片在src/images目录下，写法如下：

  import React from "react";
  import Loader from "./StyledHeader";
  import pastaImage from './images/pasta-image.jpg';
  
  const HeroHeader = () => {
    return (
      <div>
        <div className="hero-img">
          <img src={pastaImage} alt="pasta" />
          <div className="hero-text">
            <h1>Checkout</h1>
            <Loader />
            <h1>Recipes</h1>
          </div>
        </div>
      </div>
    );
  };
  
  export default HeroHeader;
  

  这种方式会由Webpack处理图片资源，部署时不会出现路径匹配问题，前提是导入路径准确。

• 额外排查点

  • 查看Vercel部署日志，确认是否有图片资源未上传成功的提示
  • 检查.gitignore文件，确保图片所在目录未被排除在版本控制外
  • 在Vercel项目控制台清除部署缓存后重新部署

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