更改背景图片REACTJS

Question

我有一个img标签反应。我将它用于风格背景。 但该代码引发了错误。

<img className="user-avatar" style={{ background:"url("+{obj.producer_info.avatar_url}+")"  }} id="first-user" src="img/fillavt.png" />

Answer 1

首先，利用新的字符串连接语法：

<img className="user-avatar" style={{ background:`url(${obj.producer_info.avatar_url})`}} id="first-user" src="img/fillavt.png" />

首先，您可以降低打开/关闭报价的复杂性。

Answer 2

当您进行字符串连接时，不需要在{}内指定变量。你可以简单地做

<img className="user-avatar" style={{ background:"url("+obj.producer_info.avatar_url+")"  }} id="first-user" src="img/fillavt.png"

或者使用template literals

<img className="user-avatar" style={{ background:`url(${obj.producer_info.avatar_url})`  }} id="first-user" src="img/fillavt.png"