我有一个对象数组,每个对象都有一个 imageUrl 属性,但是当我遍历这个数组以显示所有图像时,图像没有被渲染
我遍历数组并将包含图像链接的属性传递给图像 src
const ProjectData = [
{
title: "RestaurantX",
imageUrl: "../assets/images/restaurantpassport.png",
githubUrl: "",
deployUrl: "",
description: "",
tech: []
},
]
{ProjectData.map(project => {
return (
<Work borderColor={changeColor()}>
<img
src={project.imageUrl}
alt={project.title}
/>
<a className="github">
<i className="material-icons">code</i>
</a>
<a className="deploy">
<i className="material-icons">launch</i>
</a>
</Work>
)
最佳答案
您不能使用指向项目目录中某处的相对路径。通常的做法是在构建过程中将图像复制到输出目录中的已知文件夹中,然后通过 /knowfolder/filename.png
访问它们 - 前导斜杠使路径相对于您的根目录应用程序。
仅删除 ..
是不够的,因为您正在运行的应用无法在运行时访问您的项目文件夹。
当您使用 create-react-app
时,您(至少)有两个选择:1) 使用 import
导入图像或 2) 将它们放入您的/public
文件夹并使用 PUBLIC_URL
变量。
第一种方法是这样的:
import restaurantPassport from '../assets/images/restaurantpassport.png';
<img src={restaurantPassport} />;
关于javascript - 如何在 react 中显示图像数组中的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56856500/