javascript - 基于变量加载几个图像

Question

我正在尝试根据此处的值加载图像(使用 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")
    }
}

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

我在这里做错了什么？此外，是否有更推荐的更动态地执行此操作的方法？

Answer 1

你可以在 src 属性中添加一个 require:

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

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