如何在React/TypeScript中传递图片（SVG）作为组件Props

问题出在两个核心点：错误地将图片用对象包裹传递，以及类型定义、alt标签的使用不当。以下是具体修正方案：

1. 修正图片传递方式 #

在App组件里，你不需要把导入的SVG用对象包裹，直接传入资源本身即可：

function App() {
  const products = [
    {
      id: 1,
      img: internet, // 去掉外层{}，直接传递导入的图片资源
      heading: "Access a private marketplace",
      desc: "Product Description.",
      altText: "Private marketplace access icon" // 建议添加专门的alt描述文本
    },
  ];
  return (
    <main>
      <Products products={products} />
    </main>
  );
}

2. 明确TypeScript类型定义 #

导入的SVG在React项目中（如Create React App、Vite环境）会被解析为字符串类型的资源路径，所以可以替换掉any，给img字段指定明确类型：

type Product = {
  id: number;
  img: string; // 替换any为string，明确图片路径类型
  heading: string;
  desc: string;
  altText?: string; // 可选字段，用于图片的alt描述
};

type ProductsProps = {
  products: Product[];
};

3. 正确渲染图片并设置alt标签 #

在Products组件中，使用正确的图片路径，并给alt标签设置有意义的文本，不要直接传入图片路径：

const Products = ({ products }: ProductsProps) => {
  return (
    <div>
      {products.map((product) => (
        <div key={product.id}> {/* 使用数据的唯一id作为key，避免用map的index */}
          id: {product.id}
          <img src={product.img} alt={product.altText || product.heading} /> {/* 优先用专门的alt文本，无则回退到标题 */}
          heading: {product.heading}
          desc: {product.desc}
        </div>
      ))}
    </div>
  );
};

export default Products;

额外提示 #

• 不要用map的index作为组件key，尽量使用数据中唯一的id，避免渲染错误和性能问题
• 始终给img设置有意义的alt文本，这是网页可访问性的基本要求
• 若你的项目使用Next.js等框架，SVG导入类型可能为StaticImageData，此时只需对应修改Product类型中的img字段即可

内容的提问来源于stack exchange，提问作者chris z