JavaScript设置img的src为cid:logoImage时，如何避免触发资源加载？

当你在浏览器环境中设置img的src为cid:logoImage时，浏览器会将cid识别为未知URL协议，从而触发ERR_UNKNOWN_URL_SCHEME错误。以下是两种可行的处理方案：

1. 直接操作HTML字符串（推荐用于邮件模板生成场景） #

如果你的需求是生成邮件HTML内容而非在浏览器中预览，直接修改模板的HTML字符串而非通过DOM API设置属性，可避免浏览器触发资源加载：

// 获取邮件模板的HTML字符串
const templateHTML = document.querySelector(".emailTemplateSubmit").innerHTML;
// 替换logo的src属性为cid格式
const modifiedTemplate = templateHTML.replace(
  /id="newsletterLogo"[^>]*src="[^"]*"/,
  'id="newsletterLogo" src="cid:logoImage"'
);
// 后续使用modifiedTemplate作为邮件内容发送即可

2. 环境区分加载 #

在浏览器预览时使用占位图，仅在邮件渲染环境下设置cid格式的src：

const logoImg = document.querySelector(".emailTemplateSubmit #newsletterLogo");
// 根据你的应用逻辑判断当前是否为邮件生成环境
const isEmailRendering = /* 你的环境判断逻辑，比如特定标识或参数 */;

if (isEmailRendering) {
  // 邮件环境下设置cid，此时不会触发浏览器的资源加载校验
  logoImg.setAttribute('src', 'cid:logoImage');
} else {
  // 浏览器预览时使用本地占位图
  logoImg.src = '/path/to/placeholder-logo.png';
}

需要注意的是：浏览器只要检测到DOM中的img元素存在有效的src属性，就会自动尝试加载资源，因此无法完全让浏览器设置cid:格式的src却不触发校验——除非你不将该元素渲染到浏览器的可视DOM中，仅作为字符串用于邮件发送。

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