如何解析React中的图片网址？

Question

我是新来的，如果我提出一些微不足道的问题，请道歉，但无法在任何地方找到答案。我需要解析我的链接显示图像。图像的格式为例如p8983.png

所以我建立了这个正确的链接，不确定如何使用---＆gt;渲染/解析它。见第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>

数学计算后的渲染，图像和值

Answer 1

您的代码与您想要的内容之间存在细微差别：<img src="{targetImage}">将图片的来源设置为字符串"{targetImage}"，这显然无效。 React props的正确格式是<img src={targetImage}>，它应该产生所需的输出。

确保您从Facebook上阅读JSX in Depth以了解差异，这样您就可以避免这样的错误并更好地了解JSX和React;它应该可以帮助你理解你做错了什么！