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

Question

我创建了一个与动态内容反应的小测试。在边栏中有类似 bootstrap 折叠的东西，包含带有图标和名称的列表。问题是 "Natürlich" 中的某些图像未显示。这些图像与所有工作图像一起存储，如果我按照检查员的 link 进行操作，正确的图像就在正确的位置。

我有一些代码要获取列表项的名称，首先删除变音符号，然后将其放在图像的 link 之间，如您在此处所见。这似乎适用于所有其他图像，除了 "Natürlich"

中缺少的 3 张图像

correctNames: function(warning) {
  if (warning) {
    var warningCorrected = warning.toLowerCase().replace(/\u00f6/g, 'oe').replace(/\u00e4/g, 'ae').replace(/\u00fc/g, 'ue').replace(/\u00df/g, 'ss');
    return warningCorrected
  }     
},


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={'img/warning/' + this.correctNames(warnings) + '-active.png'} alt="" />
    <p>{warnings + " " + this.correctNames(warnings)}</p>
    </li>
    );
}

您可以找到页面here

更新！好像是UTF-8什么的有问题。虽然在我的检查器中路径显示正确，但错误消息是 kon%E2%80%8Bser%E2%80%8Bvie%E2%80%8Brungs%E2%80%8Bstoffe-active.png

我怎样才能摆脱这些错误？

Answer 1

试试这个：

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

Answer 2

如果您正在使用 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>
    );
}

Answer 3

我找到问题的根源了。 api 实际上返回的名称如 Anti\u200boxi\u200bdations\u200bmit\u200btel \u200b 用于告诉移动应用程序在哪里断词。

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

解决了问题。

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

Images are not shown in React although the path is right

path

utf

reactjs