javascript - 如何在 react 中显示图像数组中的图像

Question

我有一个对象数组，每个对象都有一个 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>
            )

Answer 1

您不能使用指向项目目录中某处的相对路径。通常的做法是在构建过程中将图像复制到输出目录中的已知文件夹中，然后通过 /knowfolder/filename.png 访问它们 - 前导斜杠使路径相对于您的根目录应用程序。

仅删除 .. 是不够的，因为您正在运行的应用无法在运行时访问您的项目文件夹。

当您使用 create-react-app 时，您(至少)有两个选择:1) 使用 import 导入图像或 2) 将它们放入您的/public 文件夹并使用 PUBLIC_URL 变量。

第一种方法是这样的:

import restaurantPassport from '../assets/images/restaurantpassport.png'; 

<img src={restaurantPassport} />;

这可能是适合您的(请参阅 here 了解更多详细信息)，但如果您想采用另一种方式，它已涵盖 here在文档中。