Vite+React+TypeScript项目本地图片渲染类型错误求助

在Vite+React+TypeScript项目中，使用map渲染列表项时，字符串类型数据展示正常，但本地图片资源渲染报错，TypeScript错误提示：

Type '{ client: string; }' is not assignable to type 'string'.ts(2322)
index.d.ts(2276, 9): 预期类型来自ImgHTMLAttributes上的src属性，该属性类型为string | undefined

相关代码如下：

Hero组件代码 #

import { Content } from "./Content";

export default function Hero() {
  return (
    <div className="py-14 sm:py-0 md:h-screen w-full flex flex-col items-center justify-evenly text-gray-300">
      <div className="flex flex-row flex-wrap justify-center">
        {Content.map((item, index) => (
          <div
            key={index}
            className={`w-11/12 md:w-[45%] lg:w-[29%] md:border-[1px] border-gray-800 border-b-[1px] last:border-b-0 md:last:border-b-[1px] lg:last:border-b-0 px-5 py-2 2xl:py-8 ${removeFeatBoreder(
              index
            )}`}
          >
            <div className="flex">
              {/* 问题出在这里：item.icon */}
              <img src={item.icon} alt={item.alt} />

              <h3 className="text-blue-20 py-2 text-xl ">{item.title}</h3>
            </div>
            <p className="text-base xl:text-lg text-justify text-gray-300">
              {item.description}
            </p>
          </div>
        ))}
      </div>
    </div>
  );
}

Content数据代码 #

import client from "../../assets/image/networking.png";

export const Content = [
  {
    icon: { client },
    alt: "development",
    title: "Lorem ipsum",
    description:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
  },
  {
    icon: { client },
    alt: "development",
    title: "Lorem ipsum",
    description:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
  },
  {
    icon: { client },
    alt: "development",
    title: "Lorem ipsum",
    description:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
  },
];

问题根源在于Content数组中每个item的icon字段被错误包装成了对象，而img标签的src属性要求传入字符串类型的图片路径。

修复步骤： #

1. 修改Content数据结构，将icon: { client }改为icon: client，直接把导入的图片路径赋值给icon字段：

// 修改后的Content数据代码
import client from "../../assets/image/networking.png";

export const Content = [
  {
    icon: client, // 直接使用client变量，不再包裹成对象
    alt: "development",
    title: "Lorem ipsum",
    description:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
  },
  // 其他列表项做同样修改
];

2. 组件中的img标签无需调整，此时item.icon已经是符合要求的字符串类型，TypeScript错误会自动消失：

<img src={item.icon} alt={item.alt} />

补充说明： #

在Vite中，导入本地图片资源时，import client from "../../assets/image/networking.png"会返回字符串格式的资源路径（开发环境为本地路径或base64，生产环境为打包后的哈希路径），直接赋值给img的src即可，不需要额外包装成对象。

内容的提问来源于stack exchange，提问作者fatemeh lohrasbi