时间戳

首页 > 解决方案 > 使用基于 json 数据字符名称的导入图像

javascript - 使用基于 json 数据字符名称的导入图像

问题描述

我从 json 文件中获取数据，当我获取对象的字符名称时，我希望 div 从我导入的图像中渲染图像。但是，当我使用src={char}并说例如 json 文件中的 char 是“sage”时，我想使用 sage 图像。但是这样做是行不通的。我也成功地从 json 文件中获取数据，所以这方面没有问题。

谢谢！

import sage from '../../assets/images/agents/sage_thumb.webp';
import viper from '../../assets/images/agents/viper_thumb.webp';
import jett from '../../assets/images/agents/jett_thumb.webp';
import valorant_rank from '../../assets/images/ranks/valorant.png';


const renderBody = () => {
        return matchData && matchData.map(({ id, char, name, roundsPlayed, performance, multiKills, team }) => {
            return (
                <tr key={id} className='tr-background'>
                    <td className='match-table__agent-cell'><img className='img-fluid' src={char} alt="" /></td>
                </tr>
            )
        })
    }

标签： javascriptreactjsjsx

解决方案

我会使用一个对象将代理名称映射到其图像 url

const imageByAgent = {
  sage: "../../assets/images/agents/sage_thumb.webp",
  viper: "../../assets/images/agents/viper_thumb.webp",
  ...
}

对于图像 src，您可以使用字符名称获取 url

<img className='img-fluid' src={imageByAgent[char]} alt="" />

推荐阅读