Question

我想要实现的目标：

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

问题是什么：

data-original属性未将我的~/转换为我的图片的相对根路径

正常的图片路径：

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

ASP.NET核心路径： 这需要 ~/ 告诉ASP.NET它是从根相对路径

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

LazyLoad的图片

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

是否有任何人有使用LazyLoad data-original属性使相对根路径正常工作的经验？

我已经尝试过这样做：

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

但它不起作用

Answer 1

我自己想出了答案。我决定在Controller中创建自己的相对根路径变量，然后将值返回到View中。那时我只需要使用Razor Markup插入变量并完成它！

我的环境：

.NET Core 1.1
ASP.NET Core

<强>控制器：

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属性内。因此，那些使用第三方库或处于需要指定非src方式调用文件的情况下，此解决方案只需添加可扩展性即可。

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

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

解决方案：

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

注意：这对JavaScript和CSS也很有用！只需将ViewBag.wwwRootPath放在所需文档中即可保持一致！

使用ASP.NET核心的LazyLoad - 相对根路径？

1 个答案: