如何使用带有哈希图像标签助手 asp-append-version 的 jQuery.Lazy() 插件（在 asp.net 核心中）

Question

我在配置 jQuery.Lazy() 以处理附加了哈希的图像时遇到问题。在 asp.net 核心 Razor 页面中，您可以使用 Image Tag Helper，以便服务器在 src 附加一个哈希值，如果图像被修改，该哈希值会被检查/更新。语法非常简单：

对于<img>，只需添加asp-append-version="true"，服务器就会自动将哈希附加到src。即：

<img src="/images/Photo.jpg" asp-append-version="true">

在浏览器中显示为：

<img src="/images/Photo.jpg?v=4jjcjhwsV9YZ1K8lXgg_50rci1ju_mNaz-HABqCvPFk">

问题是：它只能应用于 src，因此存在问题。

所以当我像这样将 .lazy 添加到 <img> 时：

<img class="lazy" src="/images/PhotoPlaceholder.png" data-src="/images/Photo.jpg" asp-append-version="true">

.lazy 效果很好（图像按预期淡入），但 HTML 现在是这样的：

<img class="lazy" src="/images/PhotoPlaceholder.png?v=4jjcjhwsV9YZ1K8lXgg_50rci1ju_mNaz-HABqCvPFk" data-src="/images/Photo.jpg">

显然，现在哈希将不起作用，因为它附加到 PhotoPlaceholder.png 而不是 Photo.jpg。那么，如何配置 jQuery.Lazy() 以使用哈希？使用jQuery.Lazy() 或一些额外的jquery？顺便说一句：我已经尝试过使用“属性”选项等，但无法使其正常工作。任何人都知道如何解决这个问题？我不能是唯一遇到此问题的人。

此外，这甚至可能吗？还是我只需要选择一个功能而不是另一个？我需要版本哈希检查，因为图像可能会被用户更改，因此它们需要自动刷新（而不是每个人都必须通过点击页面上的<ctrl> F5 来进行缓存清空重新加载）。我也了解浏览器使用/需要 <src> 来显示图像（从这个角度来看，没有什么可以做的），但我希望有人能想出解决这个难题的方法。

我的 jQuery.Lazy() 非常简单：

$(".lazy").Lazy({
    effect: 'fadeIn',
    effectTime: 1000
});

感谢您的任何帮助/建议... :)

Answer 1

事实证明，有两种方法可以处理这个问题：

解决方案 1：
感谢@eisbehr 的帮助，有一种方法可以使用隐藏的<link> 元素在客户端上附加data-src，如下所示：

<link class="hide-control" id="source-img-1" href="/images/Photo.jpg" asp-append-version="true">
<img class="lazy" id="img-1" data-loader="hashedImageLoader" src="/images/PhotoPlaceholder.png" data-src="/images/Photo.jpg" asp-append-version="true">

这将产生以下 HTML 标记：

<link class="hide-control" id="source-img-1" href="/images/Photo.jpg?v=AAnmbJAusQ-go5lyg9qCes4WGj8oWsp4eGH78CKKUPA">
<img class="lazy" id="img-1" data-loader="hashedImageLoader" src="/images/PhotoPlaceholder.png?v=4jjcjhwsV9YZ1K8lXgg_50rci1ju_mNaz-HABqCvPFk" data-src="/images/Photo.jpg">

然后使用 Jquery，使用来自 <link> 的 href 更新 <img>，如下所示：

$('.lazy').Lazy({
    effect: 'fadeIn',
    effectTime: 1000,
    beforeLoad: element => {
        let source = $('#source-' + element.attr('id')).attr('href');
        element.attr('data-src', source);
    }
});

解决方案 2：
第二种方法（可能是@JasonPan 建议的首选）是使用 asp.net 核心在服务器上附加带有 asp-append-version 的 data-src。在页面中（如果通过 AJAX 检索，则为部分视图），只需添加：

@using Microsoft.Extensions.DependencyInjection;

var versionProvider = Context.RequestServices.GetRequiredService<IFileVersionProvider>();

// Loop as needed for each file
PathFile = "/images/Photo.jpg";
PathFileWithHash = versionProvider.AddFileVersionToPath(Context.Request.Path, PathFile);
<img class="lazy" src="/images/PhotoPlaceholder.png" data-src="@PathFileWithHash" asp-append-version="true">

在客户端，只需调用 .lazy:

$(".lazyLoadImage").Lazy({
    effect: "fadeIn",
    effectTime: 1000
});

两种解决方案都按预期工作，所以请自行选择... :)