.NET Core 2.0中如何将相对图片路径传入data-*属性？

这个问题我之前也碰到过，核心原因是asp-append-version这个Tag Helper默认只处理<img>标签的src属性，你的data-src和data-src-retina还是静态路径，没有带上自动生成的版本号，导致高分辨率显示器上无法正确加载对应资源。下面给你两个可行的解决方案：

方案一：手动在视图中生成带版本号的路径 #

首先在视图顶部注入IFileVersionProvider，它是asp-append-version背后用来生成带版本号路径的核心服务：

@inject Microsoft.AspNetCore.Mvc.TagHelpers.IFileVersionProvider FileVersionProvider

然后在<img>标签里，调用FileVersionProvider.AddFileVersionToPath方法，给data-src和data-src-retina生成带版本号的路径：

<img 
    src="~/images/avatar.jpg" 
    data-src="@FileVersionProvider.AddFileVersionToPath(ViewContext.HttpContext.Request.PathBase, "~/images/avatar.jpg")" 
    data-src-retina="@FileVersionProvider.AddFileVersionToPath(ViewContext.HttpContext.Request.PathBase, "~/images/avatar2x.jpg")" 
    asp-append-version="true" 
    width="69" 
    height="69" 
/>

这样data-src和data-src-retina的路径就会和src一样，带上基于文件内容哈希的版本号，解决静态路径带来的问题。

方案二：自定义Tag Helper实现批量处理（适合多场景复用） #

如果你的项目里很多地方都需要给<img>的data属性添加版本号，写一个自定义Tag Helper会更高效：

1. 创建自定义Tag Helper类：

using Microsoft.AspNetCore.Mvc.TagHelpers;
using Microsoft.AspNetCore.Razor.TagHelpers;

[HtmlTargetElement("img", Attributes = "asp-append-version-data")]
public class ImgAppendVersionDataTagHelper : ImageTagHelper
{
    public ImgAppendVersionDataTagHelper(IFileVersionProvider fileVersionProvider) : base(fileVersionProvider)
    {
    }

    [HtmlAttributeName("asp-append-version-data")]
    public string DataAttributes { get; set; }

    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        // 先执行原生ImageTagHelper的逻辑（处理src属性）
        base.Process(context, output);

        if (!string.IsNullOrEmpty(DataAttributes))
        {
            // 拆分需要处理的data属性列表
            var attributes = DataAttributes.Split(',');
            foreach (var attr in attributes)
            {
                var trimmedAttr = attr.Trim();
                if (output.Attributes.TryGetAttribute(trimmedAttr, out var attrValue))
                {
                    // 给每个目标属性添加版本号
                    var versionedPath = FileVersionProvider.AddFileVersionToPath(RequestPathBase, attrValue.Value.ToString());
                    output.Attributes.SetAttribute(trimmedAttr, versionedPath);
                }
            }
        }
    }
}

2. 在_ViewImports.cshtml中注册这个Tag Helper（替换YourAssemblyName为你的项目程序集名称）：

@addTagHelper *, YourAssemblyName

3. 之后就可以在视图里这样使用，只需要通过asp-append-version-data指定需要处理的data属性即可：

<img 
    src="~/images/avatar.jpg" 
    data-src="~/images/avatar.jpg" 
    data-src-retina="~/images/avatar2x.jpg" 
    asp-append-version="true" 
    asp-append-version-data="data-src, data-src-retina"
    width="69" 
    height="69" 
/>

这种方式一劳永逸，后续其他需要处理的img标签直接复用这个Tag Helper就行。

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