Razor Pages如何实现图片动态URL？现有代码客户端无法加载图片

• asp-append-version 是Razor内置标签助手的专属属性，仅作用于<img>、<script>、<link>等支持的原生资源标签，添加到普通<div>标签上不会生效，既无法解析~开头的虚拟路径，也不会自动追加版本查询参数。
• 引号嵌套冲突：style属性用双引号包裹，内部url()又用了双引号，会导致浏览器解析HTML属性时直接截断，生成错误的样式规则。
• 虚拟路径未转换：~开头的路径只有经过Razor处理才会转换为站点实际根路径，直接拼接到字符串里输出到浏览器时会保留~字符，无法定位到正确的资源地址。

方案1：无需版本缓存控制的场景 #

提前在Razor代码块中将虚拟路径转换为实际可访问的站点路径，注意url()内使用单引号避免和外层属性引号冲突：

@{
    // 解析~开头的虚拟路径为实际站点路径
    var imgPath = Url.Content($"~/ImagesAds/{Model.ImageName}");
}
<div class="card-img-little" style="background-image:url('@imgPath')"></div>

方案2：需要保留版本缓存能力的场景 #

如果你需要实现asp-append-version对应的缓存击穿效果，有两种实现方式：

方式A：借助隐藏img标签+JS实现 #

<!-- 隐藏的img标签利用TagHelper生成带版本号的完整路径 -->
<img id="adsImg" src="~/ImagesAds/@Model.ImageName" asp-append-version="true" style="display:none" />
<div class="card-img-little" id="adsContainer"></div>

<script>
window.addEventListener('load', function(){
    const imgSrc = document.getElementById('adsImg').src;
    document.getElementById('adsContainer').style.backgroundImage = `url(${imgSrc})`;
})
</script>

方式B：手动生成带版本号的路径（无需JS） #

@inject IFileVersionProvider FileVersionProvider;
@{
    var imgVirtualPath = $"~/ImagesAds/{Model.ImageName}";
    // 手动生成和asp-append-version效果一致的带版本号路径
    var imgPathWithVersion = FileVersionProvider.AddFileVersionToPath(Request.PathBase, imgVirtualPath);
}
<div class="card-img-little" style="background-image:url('@imgPathWithVersion')"></div>

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