无法在 React + TypeScript + Vite 中获取图像数据

can not get image data in react + typescript + vite

提问人:fatemeh lohrasbi 提问时间:9/16/2023 最后编辑:moonwave99fatemeh lohrasbi 更新时间:9/16/2023 访问量:72

问:

我有一个 vite + react + typescript 项目

使用地图呈现项目列表时 字符串类型数据没有任何问题 但是我对本地的img源有问题

显示错误: 类型“{ client: string; }”不能分配给类型“string”.ts(2322) index.d.ts(2276, 9): 预期类型来自属性“src”,该属性在此处在类型“DetailedHTMLProps<ImgHTMLAttributes, HTMLImageElement>上声明 (属性)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.",
  },
  
];

ReactJS TypeScript 图像 vite src

评论


答:

1赞 Lasha Markhvaidze 9/16/2023 #1

您已将 item.icon 包装在 Content 数组内的对象中。应直接将图像源指定为字符串,而不是对象。下面应如何定义 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.",
  },
];

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

评论

0赞 fatemeh lohrasbi 9/17/2023
非常感谢 🙏🙏