如何转义图片路径特殊字符 实现JQuery动态加载DB存储的图片

原有方案的问题说明 #

将@Url.Content("~/Content/Images/img_1.jpg")这类Razor服务端语法存入数据库的方式本身不可行：@Url.Content是服务端渲染时才会执行的语法，存入数据库后直接通过JS读取渲染时，浏览器无法识别Razor语法，会把未解析的字符串当作路径请求，自然返回404错误。你后续调整为数据库仅存储文件名的方案是正确的。

JS拼接标签的转义问题解决方案 #

最优方案：使用jQuery DOM操作自动处理转义 #

不直接拼接HTML字符串，通过jQuery的属性赋值方法自动处理所有特殊字符转义，不需要手动处理转义逻辑，出错概率最低：

// 新建img元素并赋值属性
const $img = $('<img>')
  .attr('src', `/Content/Images/${metadata.imgSrc}`)
  .attr('alt', metadata.title);
// 插入到目标容器位置
$('#your-target-container').append($img);

备选方案：手动拼接字符串的正确写法 #

如果必须使用字符串拼接的方式，需要给属性值包裹双引号，同时对变量中的双引号做转义处理：

const imgTag = `<img src="/Content/Images/${metadata.imgSrc.replace(/"/g, '&quot;')}" alt="${metadata.title.replace(/"/g, '&quot;')}">`;
$('#your-target-container').html(imgTag);

部署兼容优化 #

如果你的站点可能部署在子目录下，直接写/Content/Images/固定根路径可能出现404，可以提前在Razor页面中把基础路径输出到JS全局变量：

<!-- 在页面的Razor部分定义全局图片基础路径 -->
<script>
window.IMG_BASE_PATH = '@Url.Content("~/Content/Images/")';
</script>

后续JS拼接路径时直接调用即可，适配不同部署场景：

.attr('src', `${window.IMG_BASE_PATH}${metadata.imgSrc}`)

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