为何浏览器会去除Base64图片URL中的反斜杠？

核心原因 #

你碰到的问题本质是HTML解析规则和CSS属性直接赋值的差异：

• 用模板字符串拼接HTML插入DOM时，浏览器会先解析HTML内容，反斜杠在HTML里属于转义字符，Base64中的单个反斜杠会被浏览器当作转义标记处理，最终要么被移除，要么被替换成空格（不同浏览器解析行为可能有差异）。
• 但通过$('#cc_' + cc).css('backgroundImage', 'url(' + r.cc[cc] + ')')设置时，是直接操作元素的CSSOM（CSS对象模型），跳过了HTML解析的转义环节，所以Base64里的反斜杠能被正确识别和保留。

解决办法 #

1. 转义反斜杠后再拼接HTML
   把Base64字符串里的单个反斜杠替换成双重反斜杠（\\），这样HTML解析后会自动还原成单个反斜杠。示例代码：

   // 假设你的模板字符串结构如下
   const html = `<div id="cc_${cc}" style="background-image: url(${r.cc[cc].replace(/\\/g, '\\\\')})"></div>`;
   // 插入到DOM中
   document.body.insertAdjacentHTML('beforeend', html);
   

2. 避免拼接HTML，直接用DOM操作设置样式
   延续你已经验证有效的方式，先获取或创建目标元素，再通过.css()或者原生DOM的style属性设置背景图：

   // 原生DOM操作示例
   const targetEl = document.getElementById(`cc_${cc}`);
   targetEl.style.backgroundImage = `url(${r.cc[cc]})`;
   

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