CSS、JS及图片无法关联HTML页面的问题排查求助

1. 修复本地资源（CSS/图片）加载失败问题 #

（1）修正CSS链接标签错误 #

你的link标签type属性完全写错了，type应指定MIME类型为text/css，而非文件路径：

<link rel="stylesheet" href="/asset/css/stayl.css" type="text/css">

同时检查文件名拼写：stayl.css大概率是style.css的笔误，这类拼写错误是本地资源加载失败的常见原因。

（2）修正本地文件路径问题 #

本地file://协议下，开头的/代表系统根目录（如C:/），如果asset文件夹和index.html在同一目录下，需去掉开头的/，改用相对路径：

<link rel="stylesheet" href="asset/css/stayl.css" type="text/css">

另外检查图片路径：控制台报错的soha.jRg扩展名明显错误，应修正为soha.jpg。

2. 修复Font Awesome资源被拦截问题 #

（1）修正CDN链接错误 #

你的Font Awesome链接末尾多了一个单引号（URL中的%27就是单引号），且文件名a11.min.css为拼写错误，正确文件名是all.min.css，替换为正确链接：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

（2）处理integrity验证失败 #

如果必须保留integrity属性，需使用CDN官方提供的正确SHA-512哈希值；若无需验证，直接删除integrity及对应的crossorigin属性，即可避免资源被拦截。

内容的提问来源于stack exchange，提问作者soha ky