Question

我有一个angular-cli应用程序，我想预先加载图像。我在index.html <head>中添加了以下标记：

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

这些链接不是404。也就是说，资产指向浏览器中的加载：<myhost>/assets/img/cards/10_of_clubs.png。

但预加载并不起作用，因为样式表中生成了URL：

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

导致不同的网址，la：/10_of_clubs.c7b975e5edc1b3444d45.png

我想要做的是以某种方式引用我的index.html中assets目录中的图像，并让angular-cli用他们的＆＃39;编译＆＃39;来引用它们。网址。

顺便说一句，我也尝试过：

img = new Image();
img.src = '../assets/img/cards/10_of_clubs';

在我的打字稿中，但这似乎再次引用了我在index.html尝试中获得的相同路径。

Answer 1

添加--output-hashing=bundles，将生成没有哈希的图像。

ng build --prod --output-hashing=bundles

注意：图像文件名中的HASH在每次构建后都会在managing browser cache中生成。

Answer 2

您可以使用这些代码来显示图片。

@Component({
   selector:'loading-image',
   template:'<img [src]="srcImg"/>'
})
srcImg:string = "../assets/img/cards/img.jpg"