基于变量加载几个图像答案

【问题标题】：Loading a couple images based on a variable基于变量加载几个图像
【发布时间】：2020-04-01 04:44:44
【问题描述】：

我正在尝试根据此处的值加载图像（使用 React 和 JavaScript）。让我告诉你我目前拥有的东西。

this.state.categories.map((value, index) => {
     return <div className={categoryStyle.column}
                 key={index}
                 onClick={() => {this.setCategory(value)}}>
            <img src={this.getImage(value)}/>
     </div>
}) : <Spinner/> }

getImage = (category) => {
    switch(category) {
        case "people":
            return "./img/people.png"
        case "planets":
            return "./img/planets.png"
        case "films":
            return "./img/films.png"
        case "species":
            return "./img/species.png"
        case "vehicles":
            return "./img/vehicles.png"
        case "starships":
            return "./img/starships.png"
        default:
            return console.log("No image available")
    }
}

该值包含类别名称，例如人物或电影。当我签入我的 Html 时，图像 src 实际上显示 /img/people.png，但图像没有加载。

我在这里做错了什么？另外，有没有更推荐的更动态的方法？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

您可以在 src 属性中添加 require：

<img src={require(this.getImage(value))} />

但是，我建议您用简单的 if else 替换您的 switch 函数（require 可能无法正确评估您的 console.log）。

【讨论】：

感谢您的回答。我实际上在 src 文件夹中有我的图像。我已将它们放在公用文件夹中，现在它可以工作了！ :)
您知道我将如何处理相同的事情，但使用背景图像吗？编辑：没关系我已经修好了！

【解决方案2】：

我的问题是我的图像位于 src/img 文件夹中。我现在将图像文件夹放在公用文件夹中，现在一切正常！

我还删除了我的功能，只是做了以下操作。

<img height="50" src={"./categoryImages/" + value + ".png"}/>

【讨论】：