时间戳

首页 > 解决方案 > 动态img src

javascript - 动态img src

问题描述

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

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

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

我怎样才能解决这个问题？谢谢！

标签： javascriptreactjs

解决方案

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

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

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

推荐阅读