I have a situation where I need to assign two different background images to two div elements with IDs div1 and div2. These images have the same name but are located in different folders. In order to achieve this, I set up my configuration as follows:
app.component.html :
<div id="div1"></div>
<div id="div2"></div>
app.component.css:
I used the background-image property with different paths for each div.
#div1 {
background-image: url('../assets/images/videos/back.jpg');
/* other styles */
}
#div2 {
background-image: url('../assets/images/blogs/back.jpg');
/* other styles */
}
Problem :
When serving the app using ng serve, both div elements display the same background image.
Please note that the path to both images is different but the name is the same.
Reason :
Upon checking the browser's developer tools, I noticed that the style is being applied as follows:
#div1 [_ngcontent-c0] {
background-image: url(back.jpg);
/* other styles */
}
#div2 [_ngcontent-c0] {
background-image: url(back.jpg);
/* other styles */
}
This means that instead of
url('../assets/images/blogs/back.jpg')url(back.jpg) - without the relative path, causing both div elements to show the same image in the background.
Question :
Is this expected behavior for Angular? If not, what am I missing here?