Question

我已经创建了一个与动态内容做出反应的小测试。在侧边栏中有类似引导程序折叠的内容，包含带有图标和名称的列表。问题是“Natürlich”中的某些图像未显示。这些图像与所有工作图像一起存储，如果我按照检查员的链接，正确的图像位于正确的位置。

我有一些代码继续使用列表项的名称，然后首先删除变音符号，然后将其放在图像的链接之间，如此处所示。除了“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

UPDATE！这似乎是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, '')

解决了这个问题。

尽管路径正确

3 个答案: