react+typescript+vite中无法获取图片数据

Question

我有一个 vite + React + Typescript 项目

使用地图渲染项目列表时 string类型数据没有任何问题 但我对本地的 img 源有问题

显示错误： 输入 '{ 客户端：字符串； }' 不可分配给类型 'string'.ts(2322) index.d.ts(2276, 9)：预期类型来自属性“src”，该属性在“DetailedHTMLProps”类型上声明 （属性）React.ImgHTMLAttributes.src？：字符串 |未定义

`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">

>! problem is here: 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>
  );
}
`

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.",
  },
  
];

Answer 1

您已将 item.icon 包装在 Content 数组内的对象中。您应该直接将图像源指定为字符串，而不是对象。以下是您应该如何定义内容数组：

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

export const Content = [
  {
    icon: client, // Use the image source directly, not as an object
    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, // Use the image source directly, not as an object
    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, // Use the image source directly, not as an object
    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.",
  },
];

通过进行此更改，您将图像源指定为字符串，这是属性所期望的，并且应该解决错误