为什么JavaScript会移除图片URL中的正斜杠，该如何修复？

问题根源 #

background-image路径斜杠丢失的核心原因是引号嵌套冲突：
你行内style属性已经使用双引号包裹，内部url()又嵌套了双引号，浏览器解析HTML时会错误识别引号配对规则，导致路径内容被异常解析，斜杠被过滤。

修复方法（任选一种即可） #

• 方案1：省略url()内的引号（无特殊字符的路径可直接省略引号，最简便）
  把原代码中对应行改为：

  background-image: url(${cObj.imgPath});
  

• 方案2：url()内使用单引号，和外层style的双引号做区分
  把原代码中对应行改为：

  background-image: url('${cObj.imgPath}');
  

• 方案3：内层双引号使用HTML实体转义
  把原代码中对应行改为：

  background-image: url("${cObj.imgPath}");
  

修正后的核心代码示例 #

let cardsObject = 
[
    {
        title:"FMCG-F&B", discription:"marketing and business planning",imgPath:"./images/firm3.jpg"
    } 
]

function cardShow() {
    let featCards =""; 
    cardsObject.forEach(cObj=>{
        featCards+=
        `
        <div class="card mr-2 mt-2"
        style="
            background-image: url(${cObj.imgPath});
            background-size: cover;
            object-fit: contain;
        ">
            <div class="innerCard">
                <h5 class="cardHeading text-center text-uppercase ">
                    ${cObj.title}
                </h5>
            </div>
            <p class="cardDeatils">
            ${cObj.discription}
            </p>
        </div>
        `
    })
    document.getElementById("featuresCards").innerHTML = featCards; 
}

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