LazyLoad 与 ASP.NET Core - 相对根路径？答案

【问题标题】：LazyLoad with ASP.NET Core - Relative Root Path?LazyLoad 与 ASP.NET Core - 相对根路径？
【发布时间】：2017-02-19 02:28:54
【问题描述】：

我想要达到的目标：

使用 LazyLoad 的 data-original 属性，同时为我的相对根路径保留 ASP.NET 的 ~/ 路径标识符！

问题是什么：

data-original 属性不会将我的~/ 转换为我的图像的相对根路径

普通图片路径：

<img src="www/folder/file.png" />

ASP.NET Core 路径： 这需要一个 ~/ 告诉 ASP.NET 它来自根相对路径

<img src="~/folder/file.png" />

LazyLoad 的图片

<img data-original="/folder/file.png" />

有没有人有任何经验让相对根路径与 LazyLoad 的 data-original 属性一起正常工作？

我已经尝试过这样做：

<img data-original="~/folder/file.png" />

但它不起作用

【问题讨论】：

标签： jquery asp.net asp.net-mvc jquery-lazyload

【解决方案1】：

我自己想出了答案。我决定在控制器中创建自己的相对根路径变量，然后将值返回到视图中。那时我所要做的就是使用 Razor Markup 插入变量并完成！

我的环境：

.NET Core 1.1
ASP.NET 核心

控制器：

IHostingEnvironment 服务有两个特别重要的属性：ContentRootPath 和 WebRootPath。出于我的目的，我将使用ContentRootPath，因为我想访问相对根路径，或者换句话说，wwwroot

private readonly IHostingEnvironment _hostingEnvironment;

public HomeController(IHostingEnvironment hostingEnvironment)
{
    _hostingEnvironment = hostingEnvironment;
}

确保将命名空间添加到文件中！

using Microsoft.AspNetCore.Hosting;

在我想要的控制器中完成基础工作之后，在同一个文件中，我只想要一个特定的页面来使用我的工作。为简单起见，它将在示例代码中表示为Index。

public IActionResult Index()
{
    ViewBag.wwwRootPath = _hostingEnvironment.ContentRootPath;
    return View();
}

查看：

似乎 Microsoft 的运行时 .NET Core 或构建仅将 ~/ 转换为相对根目录，前提是它位于元素内的 src 属性内。因此，那些使用 3rd 方库或需要指定非 src 方式来调用文件的情况下，此解决方案就足够了，直到他们增加了可扩展性。

我将使用问题中的示例作为解决方案的示例。因此，如前所述，此代码在应用程序中不起作用。

<img data-original="~/folder/file.png" />

解决办法：

<img data-original="@ViewBag.wwwRootPath/folder/file.png" />

注意：这也适用于 JavaScript 和 CSS！只需将ViewBag.wwwRootPath 放在您想要的文档中以保持一致性！

【讨论】：