Vite+React项目生产构建时useState中图片无法加载问题求助

问题原因 #

Vite在生产构建时会对静态资源（如图片）进行哈希重命名并调整目录结构，动态拼接的字符串路径不会被Vite的打包工具识别，导致构建后无法找到对应文件；而组件内静态导入的图片会被Vite自动处理路径和哈希，所以能正常加载。

解决方案 #

根据你的技能图片切换场景，推荐以下三种可行方案：

方案1：静态导入所有技能图片 #

将需要切换的图片全部通过import静态导入，直接使用导入后的变量作为图片路径，Vite会自动处理生产构建的路径问题：

// 导入所有需要的技能图片
import reactIcon from './assets/skills/react.png';
import jsIcon from './assets/skills/javascript.png';
import nodeIcon from './assets/skills/nodejs.png';

function SkillSection() {
  // 初始化当前展示的图片
  const [currentSkillImg, setCurrentSkillImg] = useState(reactIcon);

  // 切换图片的函数
  const switchSkillImg = (img) => {
    setCurrentSkillImg(img);
  };

  return (
    <div>
      <button onClick={() => switchSkillImg(reactIcon)}>React</button>
      <button onClick={() => switchSkillImg(jsIcon)}>JavaScript</button>
      <button onClick={() => switchSkillImg(nodeIcon)}>Node.js</button>
      <img src={currentSkillImg} alt="Skill Icon" />
    </div>
  );
}

方案2：使用new URL()生成动态路径 #

如果需要动态拼接图片名称（比如从数组遍历生成按钮），可以用Vite支持的new URL()语法，让Vite在构建时解析正确的资源路径：

function SkillSection() {
  const [currentSkill, setCurrentSkill] = useState('react');

  // 动态生成图片URL的函数
  const getSkillImgUrl = (skillName) => {
    // 注意：路径是相对于当前组件文件的相对路径
    return new URL(`../assets/skills/${skillName}.png`, import.meta.url).href;
  };

  const skills = ['react', 'javascript', 'nodejs'];

  return (
    <div>
      {skills.map(skill => (
        <button key={skill} onClick={() => setCurrentSkill(skill)}>
          {skill}
        </button>
      ))}
      <img src={getSkillImgUrl(currentSkill)} alt={`${currentSkill} icon`} />
    </div>
  );
}

方案3：将图片放入public目录 #

如果不想修改代码逻辑，可以把技能图片移动到项目根目录的public文件夹下（比如public/skills/），然后直接使用绝对路径：

// 图片路径直接写绝对路径，public目录下的文件会原封不动复制到dist根目录
<img src={`/skills/${currentSkill}.png`} alt="Skill Icon" />

⚠️ 注意：这种方式Vite不会对图片添加哈希后缀，可能存在缓存更新问题，适合对缓存要求不高的场景。

验证方法 #

修改代码后，执行npm run build构建生产版本，然后通过serve dist（需先全局安装serve：npm install -g serve）启动本地服务，验证图片是否能正常切换加载。

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