React目录组件背景图片URL转义异常问题求助

开发者阿泽

2026-7-5

解决React目录组件背景图片路径转义问题

问题根源

你传递给imgSrc的参数包含双引号包裹的url()格式，JSX解析属性时，内部双引号会被转义为"，导致浏览器无法识别正确路径。另外组件中使用了class，这不符合React规范，需替换为className。

方案一：仅传图片路径，组件内部拼接`url()`

修改组件调用代码，只传递图片相对路径：

<Catalog imgSrc="../images/redrika.png" />

调整组件代码，在backgroundImage中拼接url()（建议用单引号包裹路径，避免特殊字符问题），同时替换class为className：

import React from "react";
import '../pages/UI.css';
import './catalog.css';

function Catalog(props) {
    const {imgSrc} = props;
    console.log(imgSrc)
    return (
    <div className="column">
        <div className="catalog-img"
        style={{
            backgroundImage: `url('${imgSrc}')`,
            }}></div>
    </div>
    );
};
export default Catalog;

方案二：传递完整`url()`字符串，避免转义

若需保持传递完整url()格式，调用时使用模板字符串传递，避免双引号嵌套转义：

组件调用代码：

<Catalog imgSrc={`url(../images/redrika.png)`} />

组件代码直接使用参数（同样替换class为className）：

import React from "react";
import '../pages/UI.css';
import './catalog.css';

function Catalog(props) {
    const {imgSrc} = props;
    console.log(imgSrc)
    return (
    <div className="column">
        <div className="catalog-img"
        style={{
            backgroundImage: imgSrc,
            }}></div>
    </div>
    );
};
export default Catalog;