React为卡片映射指定背景图时路径带引号致图片加载失败

一共两个核心问题共同导致背景图加载失败：

1. 字段值携带多余引号：当前从athletes.json读取到的data.bgUrl本身就包裹了一层额外双引号，拼接进url()后参数变成带引号的无效路径，浏览器无法正常解析。
2. 静态资源引用逻辑错误：文件顶部通过import引入的img1/img2等资源属于JS模块内的局部变量，而json中存储的bgUrl是普通字符串值（比如内容为img1），字符串本身不会关联到同名的import变量，相当于传给url()的根本不是图片经过构建工具处理后的真实访问路径，自然无法匹配到资源。

按以下步骤修改即可：

• 第一步：修正athletes.json的字段格式，去掉bgUrl值的多余引号，仅存和图片对应的标识字符串即可，正确格式示例：

[
  {
    "name": "运动员A",
    "date": "2024-05-01",
    "link": "/match/1",
    "bgUrl": "img1"
  },
  {
    "name": "运动员B",
    "date": "2024-05-02",
    "link": "/match/2",
    "bgUrl": "img2"
  }
]

• 第二步：在组件内建立图片标识和实际import资源的映射表，不要直接拿json中的字符串当路径使用，修改后的完整代码如下：

import AthleteData from "../athletes.json";
import img1 from "../assets/img1.png";
import img2 from "../assets/img2.png";
import img3 from "../assets/img3.png";
import img4 from "../assets/img4.png";
import Card from "./Card";
import "./cards.scss";

// key和json中存储的bgUrl值一一对应，value为实际导入的图片资源
const imgMap = {
  img1: img1,
  img2: img2,
  img3: img3,
  img4: img4
}

export default function Cards() {
  return (
    <div className="cards-container">
      <div className="cards">
        {AthleteData.map((data, key) => {
          return (
            <div
              key={key}
              style={{
                // 从映射表取真实的图片构建路径，无需额外包裹引号
                backgroundImage: `url(${imgMap[data.bgUrl]})`,
              }}
            >
              <Card
                name={data.name}
                date={data.date}
                link={data.link}
              />
            </div>
          );
        })}
      </div>
      <h3>Load More Cards</h3>
    </div>
  );
}

补充说明 #

• 如果修正json格式后仍然检测到路径带多余引号，可以在取值时增加一步去引号处理：const bgKey = data.bgUrl.replace(/^["']|["']$/g, '')，再通过imgMap[bgKey]取对应资源即可。
• 不要直接在json中写图片的相对路径，Vite、Webpack等构建工具不会主动解析json内的静态资源路径，必须通过import或者new URL()的方式引入资源，才能拿到打包后的正确访问地址。

内容的提问来源于stack exchange，提问作者Annie