我有一个React组件（一个过敏“卡”），它使用变量的名称来分配一个图像作为背景。
<div className="allergen-card-contents">
<div className="allergen-image-container" style={{backgroundImage: `url('/icons/allergens/${allergy.name}.png')`,}}>
</div>
<p className="allergen-title">{allergy.name}</p>
</div>我有一个文件夹，其中包含所有过敏卡图标，它适用于所有这些图标-除非{allergy.name}包含大写字母。注意-我不能编辑过敏原的名称使其小写。例如：
我知道Javascript是区分大小写的--但是当我改变图标的文件名以匹配“AIP”和“Anti-Candida”的大小写时，图像是否显示并没有什么区别。
有趣的是，如果我进入页面检查器，并将大小写更改为“aip.png”或“AiP.png”，图像将呈现。我是React的新手，所以这可能是我错过的一些明显的东西，但任何指导都将非常感谢。谢谢！
1条答案
按热度按时间h6my8fg21#
您可以尝试将图像文件重命名为全部小写，并根据图像文件名更新组件名称。
或者，您可以使用
toLowerCase()方法将allergy.name变量转换为小写，然后在图像URL中使用它。这样，URL将始终使用小写字母，而不管allergy.name是什么情况。示例：
希望能帮上忙🧄🌽