JSX - 加载图像[重复]

Posted 2023-02-22

【中文标题】JSX - 加载图像[重复]

【英文标题】：JSX - load an image [duplicate]

【发布时间】：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"

【参考方案1】：

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

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

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

【参考方案2】：

你应该使用

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

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

src=`images/$text.jpg`