javascript - 动态图像源

好吧，所以我有 3 个不同的头像，我想将它们随机分配给用户，但对于每个用户来说，我决定最好的方法是将用户 ID 取模 3 并设置为任何值，所以这就是代码

<img src={`Avatar${user_id % 3}`}/>

但是，src 被解析为字符串，而不是对我导入的 Avatar3 的引用为了澄清，我想要的结果是通常编码为 <img src={Avatar3} /> 但我得到的是编码为 <img src="Avatar3" /> 的内容

我该如何解决这个问题？谢谢!

最佳答案

您可以创建一个 imageMap 并引用它。

const imageMap = {
  1: Avatar1,
  2: Avatar2,
  3: Avatar3,
}

<img src={imageMap[user_id % 3]}/>

关于javascript - 动态图像源，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59609244/

相关文章：

javascript - GraphQl查询问题