React 当中如何动态引入本地背景图片

我们都知道背景图片可以通过 backgroundImage： url();去引入，如果把 url 部分是动态渲染的，我们该如何引入。

下面是一组数据

const data = [
    {
      title: "数据采集",
      name: "Data Collection",
      key: "VITE_APP_COLLECT_URL",
      backgroundImage: "url(./pic1.png)",
    },
    {
      title: "数据标注",
      name: "Data Annotation",
      key: "VITE_APP_MARK_URL",
      backgroundImage: "url(./pic2.png)",
    },
    {
      title: "模型训练",
      name: "Model Training",
      key: "VITE_APP_AISTUDIO_URL",
      backgroundImage: "url(./pic3.png)",
    },
    {
      title: "云端评测",
      name: "Model Evaluation",
      key: "VITE_APP_EVALUATION_URL",
      backgroundImage: "url(./pic4.png)",
    },
    {
      title: "问题管理",
      name: "Issue Analysis",
      key: "VITE_APP_ISSUE_URL",
      backgroundImage: "url(./pic5.png)",
    },
  ];

如果图片地址在项目目录下，我们直接引入 style={{ backgroundImage: item.backgroundImage }}， 这样是解析不成功的。这里有二种解决方法，一种是前端自己解决。

一、将图片保存在public目录下，这样使用 ./ 直接获取，能够完成动态渲染。

二、将图片 http 地址保存在 服务端返回线上图片地址。

1. url('https://example.com/images/your_image.jpg');
   }