Angular-CLI项目中rel="preload"图片预加载失效问题求助

这个问题我之前也碰到过！核心原因其实是浏览器对资源URL的严格匹配——哪怕两个路径指向同一个文件，只要URL字符串不一样，浏览器就会把它们当成完全独立的资源，自然不会复用你预加载的那张图。你预加载用的是绝对路径/assets/img/cards/10_of_clubs.png，但CSS里生成的是相对路径../../assets/img/cards/10_of_clubs.png，两者URL不匹配，导致预加载的资源没被用上。

下面给你几个可行的解决办法：

方法一：统一路径为绝对路径（最推荐） #

Angular CLI默认已经把src/assets配置为静态资源目录，你可以直接在CSS中改用绝对路径，和预加载的路径保持一致：

1. 确认angular.json的assets配置（默认应该已经包含，不用修改）：

   "assets": [
     "src/favicon.ico",
     "src/assets"
   ]
   

2. 修改CSS中的背景图片路径为绝对路径：

   .r-10.s-3 { background-image: url(/assets/img/cards/10_of_clubs.png); }
   

3. 保持index.html中预加载的link不变：

   <link rel="preload" as="image" href="assets/img/cards/10_of_clubs.png">
   

   （注：这里的assets/其实等价于/assets/，因为Angular的base href默认是根目录，浏览器会自动解析为绝对路径）

这样两者的URL完全一致，浏览器就会复用预加载的图片资源了。

方法二：统一路径为相对路径 #

如果你不想修改CSS的路径，也可以把预加载的link改成和CSS里完全一致的相对路径。比如你的CSS文件编译后位于css/子目录下，那预加载的link应该写成：

<link rel="preload" as="image" href="../../assets/img/cards/10_of_clubs.png">

这种方法需要你明确CSS文件的最终存放位置，不如绝对路径灵活，所以更推荐第一种方法。

为什么会出现这个路径差异？ #

Angular CLI在编译项目时，会根据CSS文件所在的目录自动生成相对路径，目的是保证资源在不同部署环境下都能正常加载。但你手动添加的预加载用了绝对路径，就导致了URL不匹配的问题——浏览器的缓存和资源复用都是基于完整URL字符串的，哪怕指向同一个文件，URL不同就不会复用。

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