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

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

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

在使用..时，您有（至少）两个选择：1）使用create-react-app导入图像，或2）将其放入import文件夹中并使用{ {1}}变量。

第一种方法如下：

/public

这可能是适合您的一种（有关更多详细信息，请参见here），但是如果您想采用另一种方式，请参见文档中的here。

Answer 2

您可以使用require。

类似的东西-

const ProjectData = [
  {
    ...
    imageUrl: require("../assets/images/restaurantpassport.png"),
    ...
  },
]

Answer 3

在某种程度上，我能够使它正常工作，但我认为不是理想的方法，但是可以工作。我只需要对ProjectData array进行更改。

  {
    title: "RestaurantX",
    imageUrl: require("../assets/images/restaurantpassport.png"),
    githubUrl: "",
    deployUrl: "",
    description: "",
    tech: []
  },
]

Answer 4

您可以简单地使用 ${restaurantpassport} 声明：

import restaurantpassport from "../assets/images/restaurantpassport.png"




 const ProjectData = [
  {
    title: "RestaurantX",
    imageUrl: `${restaurantpassport}`,
    githubUrl: "",
    deployUrl: "",
    description: "",
    tech: []
  },
]

{ProjectData.map(project => { 返回（代码发射 )

如何在React中显示图像数组中的图像

4 个答案: