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

IT技术 javascript reactjs
2021-05-24 05:49:35

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

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

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

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

第一种方法如下所示：

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

<img src={restaurantPassport} />;

这可能适合您（有关更多详细信息，请参见此处），但如果您想采用另一种方式，则此处的文档中对此进行了介绍。

你可以使用require.

像这样的东西——

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

我能够让它工作，在某种程度上，我不会说是理想的，但有效。我只需要对ProjectData array.

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

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

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




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

{ProjectData.map(project => { return ( code launch )

其它你可能感兴趣的问题
上一篇服务器自动关闭并面临“ERR_STREAM_WRITE_AFTER_END”错误以及每次向客户端发送数据 下一篇找不到module：无法解析“/app/node_modules/react-native-aes-crypto”中的“react-native”