如何使用 jQuery.Lazy() 插件和散列图像标签助手 asp-append-version（在 asp.net 核心中）

Question

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

对于 <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？顺便说一句：我已经尝试使用 'attribute' 选项等，但无法正常工作。有人知道如何解决这个问题吗？我不可能是唯一一个对这个问题有运行的人。

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

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

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

感谢任何 help/suggestions... :)

Answer 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);
    }
});

方案二：
第二种方法（可能是@JasonPan 建议的首选方法）是使用 asp.net 核心在服务器上附加 data-src 和 asp-append-version。在页面中（或部分视图，如果通过 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
});

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

如何使用 jQuery.Lazy() 插件和散列图像标签助手 asp-append-version（在 asp.net 核心中）

How to use jQuery.Lazy() Plugin with hash Image Tag Helper asp-append-version (in asp.net core)

jquery

lazy-loading

asp.net-core

razor-pages