提问人:fatemeh lohrasbi 提问时间:9/16/2023 最后编辑:moonwave99fatemeh lohrasbi 更新时间:9/16/2023 访问量:72
无法在 React + TypeScript + Vite 中获取图像数据
can not get image data in react + typescript + vite
问:
我有一个 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.",
},
];
答:
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
非常感谢 🙏🙏
评论