I wanted to preload the background-image in my angular app, only to find that the image is rendered by a different name than the local image. Which made me figure out that all the resources loaded using url in the css are reneder by a name which is dfferent from their local name.

So when the background image is background-image: url('../img/home-bg.jpg'); , it gets renderd in production as

http://www.beinghealer.com/home-bg.1c0835203511d0a3.jpg

Similarly url("../webfonts/fa-solid-900.woff2") gets rendered as http://www.beinghealer.com/fa-solid-900.9fe4f614c5426b17.woff2

I have two questions:

1. Why does home-bg.jpg change to home-bg.1c0835203511d0a3.jpg, and fa-solid-900.woff2 change to fa-solid-900.9fe4f614c5426b17.woff2 ?

2. How can I preload these resources ? I tried to preload image using <link rel="preload" as="image" href="assets/img/home-bg.jpg"> inside head tag, but it preloads http://www.beinghealer.com/home-bg.jpg, which is not same as the url which gets rendered in the website!

The website client code is written in Angular 13.

CodePudding user response：

That's because you put your resources into your "src" folder. They get optimized and output-hashed, the purpose being to destroy the browser cache if there is one.

The good practice here is to put your resources into the "assets" folder : they won't get renamed. In your style, you can now access them with

background-image: url('assets/img/home-bg.jpg');

As for the preloading, I recommend you switch to Angular v15 (the latest one) and use ngSrc="your image source" instead of the usual "src".