在 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"/>