React中组件变量生成图片路径的大小写敏感问题排查

问题原因 #

React项目中静态资源的路径处理受构建工具（如Webpack、Vite）和文件系统大小写敏感性影响：

• 开发环境（如Windows系统）的文件系统不区分大小写，但生产环境（如Linux服务器）区分，导致本地检查器修改路径能显示，但实际运行时加载失败。
• 直接使用字符串拼接的URL路径，构建工具可能无法正确识别静态资源，导致路径映射错误。

解决方案 #

方案1：统一转换为小写路径（最简单） #

无需修改allergy.name本身，仅在拼接路径时将其转为小写，同时确保所有图标文件都以小写命名（如aip.png、anti-candida.png）：

<div className="allergen-card-contents">
    <div className="allergen-image-container" style={{
        backgroundImage: `url('/icons/allergens/${allergy.name.toLowerCase()}.png')`
    }}>
    </div>
    <p className="allergen-title">{allergy.name}</p>
</div>

方案2：使用动态引入处理静态资源（适配严格大小写场景） #

如果必须保留路径与allergy.name的大小写一致，通过require动态引入图片，让构建工具正确处理资源路径：

// 定义获取图片的辅助函数
const getAllergenImage = (allergenName) => {
  try {
    // 根据项目结构调整路径，示例假设图标在src/icons/allergens下
    return require(`../icons/allergens/${allergenName}.png`).default;
  } catch (error) {
    // 图片不存在时返回默认图标
    return require(`../icons/allergens/default.png`).default;
  }
};

// 组件中使用
<div className="allergen-card-contents">
    <div className="allergen-image-container" style={{
        backgroundImage: `url(${getAllergenImage(allergy.name)})`
    }}>
    </div>
    <p className="allergen-title">{allergy.name}</p>
</div>

额外检查项 #

• 清理缓存：删除浏览器缓存、构建工具的缓存目录（如node_modules/.cache、dist）后重新构建项目，避免旧路径缓存干扰。
• 匹配文件名大小写：确保图标文件名的大小写与allergy.name完全一致（如AIP.png对应allergy.name为"AIP"），同时注意部署环境的文件系统是否区分大小写（Linux/macOS区分，Windows不区分）。

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