时间戳

首页 > 解决方案 > React：如何动态映射具有不同文件扩展名的图像？

javascript - React：如何动态映射具有不同文件扩展名的图像？

问题描述

我有一系列正在映射的项目。图片以商品 ID 命名，但我注意到并非所有图片都是 jpg。其中两张图片是gif。我该如何解释这些文件？

   {this.state.items && this.state.items.map((item, index) => (
        <div className="item-container" key={item.id}>
          <div style={ { backgroundImage: `url("../../images/${item.id}.jpg")` } } className="image-container" key="image">
          </div>

标签： javascriptreactjs

解决方案

最佳解决方案：保存图片路径：

<div style={{backgroundImage: `url("../../images/${item.image}")` }} className="image-container" key="image">

或者，如果您知道 id，只需创建一个函数来获取 url，然后检查这些 id。

或者，一个你不应该使用并且会导致大量无用网络请求的蹩脚的黑客解决方案，使用两个背景图像：

<div style={{backgroundImage: `url("../../images/${item.id}.jpg"), url("../../images/${item.id}.gif")`  }} className="image-container" key="image">

CSS示例：

<div style="height: 150px; width: 350px; background-image: url(http://doesntExist.com/fake.jpg), url(http://via.placeholder.com/350x150?text=second)"/>

推荐阅读