来自 png 文件的 IMG 源根据从 API 接收到的字符串进行插值更改

Question

我正在创建一个 bulbapedia 克隆作为一个副项目。

我正在尝试让结果页面显示口袋妖怪输入的按钮。因此，我将每个按钮类型保存为 assets/typeBadges 文件夹中的一个小 png。

我将它们全部捆绑在一个文件夹中，并用一个索引文件将它们全部导出。 我将索引文件导入到 TypeBadges 文件中。

我从 pokeapi v2 中提取数据，然后将其映射到结果上，这样我就有了一个数组，其中包含口袋妖怪的一种或两种类型。 （例如，bulbasaur 是草和毒药，所以我有 typesArray with ['grass', 'poison']

如何使我的 IMG src 与数组中的字符串相关联？ （每个按钮都以其类型准确命名，直到外壳）

这是我所拥有的：

import React, {useEffect} from "react";
import '../assets/TypeBadges/index.js';

const TypeBadges = (props) => {
    const {result} = props; 

    const typeArray = [];

    useEffect(() => {
    result.types.map((type, idx) => (
        typeArray.push(type.type.name) ))
        console.log(typeArray)}, [])


    return (
        <div className="type-badges">
            <img src ={buttonforTypeArray[0]} />   
            {typesArray[1] ? <img src={buttonforTypeArray[1]} /> : null }
        </div>
    )
}

export default TypeBadges;

显然我不希望“buttonfortypearray[0]”起作用，它只是为了这个问题而填充。

我正在考虑插入类似的东西

但我遇到的问题是 typesArray[0] 和 typesArray[1] 最终变成了字符串，这搞乱了我能想到的任何类型的插值或路径。

任何帮助将不胜感激。

编辑：如果有帮助/重要，还添加我正在导入的索引文件。

export {default as dark} from './Dark.png'
export {default as dragon} from './Dragon.png'
export {default as electric} from './Electric.png'
export {default as fairy} from './Fairy.png'
export {default as fighting} from './Fighting.png'
export {default as fire} from './Fire.png'
export {default as flying} from './Flying.png'
export {default as ghost} from './Ghost.png'
export {default as grass} from './Grass.png'
export {default as ground} from './Ground.png'
export {default as ice} from './Ice.png'
export {default as normal} from './Normal.png'
export {default as poison} from './Poison.png'
export {default as psychic} from './Psychic.png'
export {default as rock} from './Rock.png'
export {default as steel} from './Steel.png'
export {default as water} from './Water.png'

Answer 1

我会使用下面的导入来立即解决。 像这样的东西：

import imageName from './whatever/assets/imageName.png';

然后像这样在 src 中使用它：

<img src={imageName} />

我不知道它如何以您导出它们的方式工作。

Answer 2

我能够找出答案。我将每个类型映射到一个对象中，使用 map() 方法从结果中提取类型名称并将它们存储在 typeArray 变量中。

接下来，检查 typeArray[1] 是否存在双重类型，并使用 typeImageMap 根据 typeArray[0/1] 值渲染正确的图像源。

所以最终有 18 个导入，每种类型一个 png，然后：

    const typeArray = result.types.map((type) => type.type.name);
    const typeImageMap = {
        bug,
        dark,
        dragon,
        electric,
        fairy,
        fighting,
        fire,
        flying,
        ghost,
        grass,
        ground,
        ice,
        normal,
        poison,
        psychic,
        rock,
        steel,
        water,
      };

/// and then in the render: 

        <div className="type-badges">
            <div className="badgeOne">
                <img src={typeImageMap[typeArray[0]]} alt={typeArray[0]} />
            </div>
            <div className="badgeOne">
            {typeArray[1] && (
                <img src={typeImageMap[typeArray[1]]} alt={typeArray[1]} />
                )}  
            </div>
        </div>