React遍历数组渲染卡片时图片导入加载失败问题

核心问题是Create React App内置的webpack对静态资源导入有规则限制，同时代码里存在文件名拼写、路径写法错误，以下两种方案任选其一即可解决。

方案1：图片存放在src目录（推荐，资源自动走webpack构建优化） #

该方案下图片会被自动压缩、添加内容hash，避免缓存问题。

• 先修正拼写错误：打开data.js，第二个商品的coverImg属性值product-meduim.jpeg拼写错误，将meduim改为medium，和实际图片文件名完全一致（注意大小写、后缀名也要完全匹配）。
• 确认图片路径：将存放商品图的Images文件夹放在src目录下，你的Card.js位于src/Components/路径，因此相对图片目录的前缀为../Images/。
• 修改Card.js的图片引入逻辑：动态引入图片时，require必须保留静态路径前缀，不能全路径用变量拼接，否则webpack编译时无法定位资源目录，修改代码如下：

  // Card.js 对应部分
  export default function Card(props) {
    let badgeText;
    if (props.item.status === "available") {
      badgeText = "IN STOCK";
    } else {
      badgeText = "OUT OF STOCK";
    }
    // 正确的动态require写法：路径前缀写死，只把动态文件名部分放变量里
    const Img = require(`../Images/${props.item.coverImg}`)
    
    return (
      <div>
        {badgeText && <div>{badgeText}</div>}
        <img src={Img} alt="product-pic" />
      </div>
    );
  }
  

如果依然报模块找不到的错误，直接调整require里的静态路径前缀，和你实际存放Images文件夹的位置匹配即可。

方案2：图片存放在public目录（适合无需构建处理的大量静态资源） #

该方案下图片不会被webpack处理，直接作为静态资源服务，绝对不能用import/require相对路径导入public下的文件，这就是你之前移动文件夹后Navbar报错的原因。

• 将Images文件夹直接放在public目录根路径下。
• 修改所有引用该文件夹图片的组件，统一用站点根绝对路径赋值给img的src属性，不需要引入操作：
  • Card.js修改：

    // Card.js 对应部分
    const Img = `/Images/${props.item.coverImg}`
    // 如果项目不是部署在域名根路径，用下面的写法兼容
    // const Img = `${process.env.PUBLIC_URL}/Images/${props.item.coverImg}`
    

  • 找到Navbar.js里报错的图片引用，删除原来的import/require相对路径写法，直接给img标签的src赋值绝对路径：

    <img src="/Images/trash-pic0.jpg" alt="导航栏图标" />
    // 非根路径部署同上加process.env.PUBLIC_URL前缀
    

• 同样需要核对data.js里的文件名拼写和实际图片完全一致。

内容的提问来源于stack exchange，提问作者Dave Odipo