Question

我正在玩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”。 onclick事件工作正常，因为<h1>元素在'holes'和'emilia'之间正确切换。

如上例所示，img路径的一部分如何成为变量？

Answer 1

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

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

您也可以使用字符串连接，但我认为上述方法最具可读性，并且与您已编写的内容紧密相关。

Answer 2

你应该使用

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

或者如果你使用ES6，你只需输入

即可

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

JSX - 加载图像

2 个答案: