React可复用组件如何根据传入数据动态渲染对应本地引入的图片

你代码的核心问题是data数组中source字段的值是字符串类型，而你顶部import导入的是经过构建工具处理后的图片资源变量，二者不存在自动映射关系，直接把字符串传给img的src属性，浏览器会将其当做普通相对路径去请求资源，自然找不到对应的图片。

最简单的解决方式是新增一张平台名称到图片资源的映射表，代码修改如下：

import React from "react";
import facebook from "../../images/facebook.png";
import youtube from "../../images/youtube.png";
import twitter from "../../images/twitter.png";

// 新增映射表，建立字符串和导入的图片资源的对应关系
const sourceMap = {
  facebook,
  youtube,
  twitter
}

function NumberBox({ data }) {
  return (
    <>
      {data.map((item) => (
        // React列表渲染必须添加唯一key属性，若title唯一可直接用item.title作为key
        <React.Fragment key={item.title}>
          <div className="title">{item.title}</div>
          {/* 从映射表中读取对应图片资源 */}
          <img src={sourceMap[item.source]} className="image" alt={item.title} />
        </React.Fragment>
      ))}
    </>
  );
}

可选优化点 #

• 可新增兜底逻辑避免未定义的source值导致报错：src={sourceMap[item.source] || 兜底图片路径}
• 若不想维护映射表，也可以将所有图标放到项目public目录下，将data中的source字段改为图片的公共路径，例如source: "/images/facebook.png"，此时直接写src={item.source}即可正常加载，无需提前import图标。

内容的提问来源于stack exchange，提问作者Arsene Wenger