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