带有.NET Core的图像标签上的data-src-retina

Question

我在.NET Core 2.0项目中工作。有没有办法获取相对图像路径并将其传递给data-*属性之一？

我有这样的图像：

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

这不适用于高分辨率显示器，因为它试图抓取data-src-retina中的静态路径。然而，这可以工作

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

但现在我无法为视网膜显示器加载高分辨率版本的图像。

有没有办法将相对图像路径传递给.NET Core中的data-*属性？

Answer 1

因为data-src-retina不是.Net Core或Razor，所以这就是~路径前缀不起作用的原因。相反，您需要将字符串转换为相对路径。为此，您可以使用Url.Content()。例如：

<img src="~/images/avatar.jpg" 
     data-src="@Url.Content("~/images/avatar.jpg")" 
     data-src-retina="@Url.Content("~/images/avatar2x.jpg")" 
     asp-append-version="true" width="69" height="69" />