ASP.NET Core从数据库取数时如何在div的data-src属性中填写图片URL

问题原因 #

你遇到的问题本质是Razor视图不会自动解析普通自定义属性里的~虚拟路径前缀，渲染后页面的data-src属性会完整保留~/前缀，浏览器无法识别这个ASP.NET Core专用的根路径标识，自然找不到对应资源。

解决方案 #

方法1（全版本通用） #

使用Url.Content()方法手动解析虚拟路径为浏览器可识别的绝对根路径，修改代码如下：

@foreach(var slide in Model.Slides)
{
    <div class="" data-src="@Url.Content($"~/images/home/slide/{slide.ImageURL}")">
    </div>
    ...
}

方法2（ASP.NET Core 6+ 简化语法） #

你也可以直接在路径前加~@触发Razor解析：

<div class="" data-src="~@/images/home/slide/@slide.ImageURL">

额外排查项 #

• 确认wwwroot/images/home/slide目录存在，且slide.ImageURL返回的文件名和目录下的实际文件名完全匹配，没有多余的斜杠、空格或特殊字符
• 如果你是用data-src实现懒加载逻辑，需要确认对应的懒加载JS库已经正确引入并初始化；如果你是要把图片设为div的背景图，需要额外写JS逻辑读取data-src的值赋值给style.backgroundImage，浏览器不会主动加载自定义属性里的资源路径。

内容的提问来源于stack exchange，提问作者Qusai Waleed AbuRayyan