Reactjs 尽管路径正确，但React中未显示图像

我在react with dynamic content中创建了一个小测试。在侧边栏中有类似于引导折叠的内容，包含带有图标和名称的列表。问题是“Natürlich”中的一些图像没有显示。这些图像与所有工作图像一起存储，如果我遵循检查器的链接，则正确的图像位于正确的位置

我有一些代码将继续获取列表项的名称，首先删除umlauts，然后将其放在图像链接之间，如您所见。这似乎适用于除“Natürlich”中缺失的3张图像之外的所有其他图像

correctNames:函数（警告）{
如果（警告）{
var warningCorrected=warning.toLowerCase（）.替换（/\u00f6/g，'oe'）。替换（/\u00e4/g，'ae'）。替换（/\u00fc/g，'ue'）。替换（/\u00df/g，'ss'）；
返回警告已更正
}     
},
render:function（）{
var warningName=this.props.warningName；
var isActive=this.state.warningState？'warning active'：'warning inactive'；
报税表（

{this.correctNames（）}
{warnings+“”+this.correctNames（warnings）}


);
}

你可以找到这一页

更新！ 这似乎是UTF-8或其他方面的问题。在my inspector中，路径显示为右侧，错误消息为

kon%E2%80%8Bser%E2%80%8bie%E2%80%8Brungs%E2%80%8Bstoffe处于活动状态。png

如何消除这些错误？

尝试以下方法：

src={`img/warning/${this.correctNames(warnings)}-active.png`}

---

如果您正在使用

webpack

，您可能需要在图像源中使用

require

render: function() {
    var warnings = this.props.warningName;
    var isActive = this.state.warningState ? 'warning-active' : 'warning-inactive';
    return ( 
    <li className={'transition ' + isActive} onClick={this.activateWarning}>
    {this.correctNames()}
    <img src={require(`'./img/warning/${this.correctNames(warnings)}-active.png'`)} alt="" />
    <p>{warnings + " " + this.correctNames(warnings)}</p>
    </li>
    );
}

render:function（）{
var warningName=this.props.warningName；
var isActive=this.state.warningState？'warning active'：'warning inactive'；
报税表（

{this.correctNames（）}
{warnings+“”+this.correctNames（warnings）}


);
}

我找到了问题的根源。api实际上返回了一些名称，如

Anti\u200boxi\u200bdations\u200bmit\u200btel

，

\u200b

用于告诉移动应用程序在哪里断词

.replace(/\u200b/g, '')

---

已解决问题。

谢谢，但我仍然有相同的问题。您能显示文件夹结构吗？我认为应该是

/img

或

/img

而不是

img

。我同时尝试了这两种方法。没有人在工作。但是我的其他所有图像都显示得很完美，它们都存储在同一个文件夹中。可能是您的函数

correctNames

中存在问题，它不会返回任何内容，请检查。再次，此函数检查所有名称。所有其他图像都显示得非常完美。此外，为了检查结果，我将更正后的名称直接显示在原始名称旁边。使用此选项时，我会在/Users/sinan/Desktop/React/better good/src/standart中找到错误

模块：“img/warning”。请尝试更新后的答案。还指定与文件相关的src，直到出现相同的问题<代码>要求

似乎总是期望模块。

.replace(/\u200b/g, '')