如何在 React 中使用来自 JSON 的地图在 div 中设置背景图像

Question

我在 React 数据文件中有一个这样的数组，我正在使用 .map() 方法在组件 ProjectItem.js 中加载 JSON 数据。

我应该如何获取对象“图片”，将其渲染为 div 中的背景图像，称为 ProjectItem 在功能组件的地图函数中？标题和类别对象出现在我的网络应用程序上，但图像未加载我只看到路径 url，请帮助谢谢。

截图

data.json

[
  {
    "id": 0,
    "title": "Projecttitle1",
    "category": "frontend development",
    "picture": "../src/Assets/Images/Desktop/Portfolio_A4.png",
  },
  {
    "id": 1,
    "title": "Projecttitle2",
    "category": "frontend development",
    "picture": "../src/Assets/Images/Desktop/Portfolio_D4.png",
  }
]

App.js

import React from "react";
import projects from "./data.json";

const App = () => {
  return (
    <div className="projectItem">
      {projects.map((el) => {
        return (
            <div key={el.id}
            style={{
            backgroundImage: `url(${el.picture})`,
            width: 300,
            height: 300
        }}
      >
        <ul>
          <li>{el.title}</li>
          <li>{el.url}</li>
          <li>{el.category}</li>
        </ul>
      </div>
      );
    })}
   </div>
  );
};

export default App;

Answer 1

图片的路径是它们在计算机上相对于项目文件夹的位置。当您使用该路径显示图像时，浏览器会在本地托管服务器上查找它们，这意味着您必须提供这些图像才能访问它们。 看看这个：https://create-react-app.dev/docs/using-the-public-folder/

我会将图像上传到存储服务并用下载 URL 替换路径。