CODEWITHSUNDEEP
htmlangularangular-cli
audiodude
audiodude

Reputation: 2810

Load image in angular-cli app with rel="preload"

I have an angular-cli app that I would like to preload images for. I put the following tags in my index.html <head>:

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

Those links are not 404s. That is, the asset pointed to loads in the browser: <myhost>/assets/img/cards/10_of_clubs.png.

But the preload doesn't work because the URLs generated in the stylesheet:

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

Result in different URLS, a la: /10_of_clubs.c7b975e5edc1b3444d45.png

What I'd like to do is somehow reference the images in the assets directory in my index.html, and have angular-cli refer to them with their 'compiled' URLs.

BTW, I've also tried:

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

In my Typescript, but this seems to again reference the same path that I'm getting in my index.html attempt.

Upvotes: 0

Views: 2947

Answers (2)

Somnath Sinha
Somnath Sinha

Reputation: 672

Adding --output-hashing=bundles, will produce images without hash.

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

Note: HASH in image filename helps in managing browser cache after every build.

Upvotes: 2

Mohammad Daliri
Mohammad Daliri

Reputation: 1406

You can use these code for show an image.

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

Upvotes: -3

Related Questions