在 React 中，如何使用多个状态属性设置 img src?

Question

在 React 中，我尝试将 img src 值设置为从 API 对象列表中检索的 URL。 当我只使用一个属性时，它可以工作。 例：

return <li key={myObject.id}><img src={myObject.icon.path} alt={myObject.summary} /></li>; 

但是，当我想将 2 个或多个属性连接在一起以形成 url 时，这将不起作用。 它只是将带大括号的实际文本字符呈现为 img src，从而产生损坏的图像。 我该如何解决这个问题？

return <li key={myObject.id}><img src='{myObject.icon.path}/someConstantText.{myObject.icon.suffix}' alt={myObject.summary} /></li>;

Answer 1

你需要字符串插值来连接javascript：

<img src={`${myObject.icon.path}/someConstantText.${myObject.icon.suffix}`}/>

这与编写相同：

<img src="iconPathName/someConstantText.myObjectIconSuffix"/>

Answer 2

Nm，我能够使用 ES6 模板字符串来做到这一点。 我首先设置以下常量：

const iconUrl = `${myObject.icon.path}/someConstantText.${myObject.icon.suffix}`;

然后我后来像这样引用它：

return <li key={myObject.id}><img src={iconUrl} alt={myObject.summary} /></li>;