JSX - 加载图像[重复]答案

【问题标题】：JSX - load an image [duplicate]JSX - 加载图像[重复]
【发布时间】：2017-02-03 04:41:12
【问题描述】：

我正在使用 reactjs 并试图在点击时更改图像。查找图像似乎有问题。

这段代码是：

render() {
    const text = this.state.liked ? 'holes' : 'emilia';
    return (
      <div className={text} onClick={this.handleClick}>
        <h1>You like {text}. Click to toggle</h1>
        <img src="images/{text}.jpg" />

      </div>

    );
  }

如果您进行硬编码，则图像可以访问“images/emilia.jpg”或“images/holes.jpg”。当<h1> 元素在“holes”和“emilia”之间正确切换时，onclick 事件可以正常工作。

img 路径的一部分怎么能像上例那样是变量呢？

【问题讨论】：

src={"images" + text + ".jpg"}

标签： javascript image reactjs

【解决方案1】：

当您使用 ES6 编写此内容时，执行您所要求的一种方法是使用字符串文字。

<img src={`images/${text}.jpg`} />

你也可以使用字符串连接，但我认为上面的方法是最易读的，和你已经写的很接近。

【讨论】：

【解决方案2】：

你应该使用

src={"images/" + text + ".jpg"}

或者如果你使用 ES6，你可以输入

src={`images/${text}.jpg`}

【讨论】：