I had an angular 6 project where we used to have CSS class for images like the below:
.some-class { background: url('asset/images/myimage.png'); This used to work without any issue irrespective of deployment and local development as well.
Lately, we upgraded the angular version to 15 for this project, where if we try to keep the above code as it is, the compiler complains Can't resolve './assets/_css/assets/images/myimage.png'
So we have tried this way:
.some-class { background: url('~asset/images/myimage.png'); Now this copies files from the asset folder to the root folder and provides the hash value of an image like myimage_2432432.png
We also tried below option:
.some-class { background: url('../../asset/images/myimage.png'); This is the same as stated in the second point, but we can use this as our application is embedded in some other portal as well keeping the file in the root folder won't work out.
As per the given architecture, seems like we can only render the image below way to the QA env:
.some-class { background('~/asset/image/myimage.png'); // Please note that this is after deployment as the app could be standalone or embedded into another portal Keeping in mind the above requirement, can anyone suggest anything?
Can we webpack would be a savior here?
