Web应用静态资源引用方法及Datatable加减号图标不显示问题问询

问题根因 #

• ~ 是后端框架（如ASP.NET）提供的根路径占位符，仅能在服务端渲染的模板代码中被解析，直接写在CSS文件中浏览器无法识别，会被当作普通路径字符处理
• wwwroot 是Web应用的静态资源根目录，客户端访问静态资源时路径不需要携带wwwroot段，你当前写的路径最终会被浏览器解析为域名/~/wwwroot/Images/xxx.png，和实际资源的访问路径域名/Images/xxx.png不匹配
• 未给图标所在的td设置宽高，背景图即使路径正确也没有可显示的容器空间

修复方案 #

1. 首先修正CSS中的资源路径，直接使用站点根相对路径即可，同时给控制列添加固定宽高：

td.details-control {
    background: url('/Images/details_open.png') no-repeat center center;
    cursor: pointer;
    /* 宽高可根据你实际的图标尺寸调整 */
    width: 20px;
    height: 20px;
}

tr.shown td.details-control {
    background: url('/Images/details_close.png') no-repeat center center;
}

2. 如果你是把样式写在后端模板（如Razor）的页面内<style>标签里，也可以用模板自带的路径解析方法：

/* 注意：单独的CSS文件不支持该写法，仅可在服务端渲染的页面内样式中使用 */
background: url('@Url.Content("~/Images/details_open.png")') no-repeat center center;

3. 额外校验项：部署到Linux等大小写敏感的环境时，要确认路径里的目录名、文件名大小写和实际存储的完全一致，避免大小写不匹配导致资源加载失败。

内容的提问来源于stack exchange，提问作者Luay Almamury