JSX - 加載圖像

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> 

    ); 
    } 

如果你硬編碼，圖像都可以訪問 「圖像/ emilia.jpg」 或 「圖像/ holes.jpg」。 onclick事件正常工作，因爲<h1>元素正確地在'洞'和'艾米利亞'之間切換。

如上例所示，img路徑的一部分如何成爲變量？

Answer 1

正如你在用ES6寫這篇文章的時候，你所要求的一種方法是使用字符串文字。

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

你也可以使用字符串連接，但我覺得上面的方法是最可讀的，和你所編寫的程序緊密跟隨。

Answer 2

你應該使用

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

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

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