javascript - 如何在React中解析图像URL？

我是新来的，如果我问的是一个小问题，很抱歉，但在任何地方都找不到答案。我需要解析我的链接以显示图像。图片格式为p8983.png

所以我建立了正确的链接，不确定如何用--->渲染/解析它-见第8行
const targetImage = `public/assets/p${playerData.player.id}.png`;
这行不通-参见第19行<div><img src="{targetImage}"></img></div>
我遇到的第二个问题是我不知道如何对从JSON提取的值进行数学计算-参见第17、18行(全部显示为字符串)，例如
<div>Passes per minute: {playerData.stats[4].value} + {playerData.stats[8].value} / {playerData.stats[7].value}</div>
数学计算后的渲染以及图像和值

最佳答案

您的代码和想要的代码之间有细微的差别:<img src="{targetImage}">将图像的源设置为字串"{targetImage}"，这显然是无效的。 React Prop 的正确格式是<img src={targetImage}>，它应该产生所需的输出。

确保您从Facebook上阅读JSX in Depth以了解它们之间的差异，从而避免出现此类错误并更好地理解JSX和React；它应该可以帮助您了解自己做错了什么!