动态配置Angular资产网址

Question

Hi i am using angular 7 and i have problem with the production build of the application. My application lies in a subfolder in the server namely www.hshsh.com/ cm/ where cm is my subfolder where the built files are kept. I have set the base href as

--base-href = /cm/

Everything works fine when it comes to downloading the js files and routing. But i have a problem with displaying the images from asset folder as

<img src="../../assets/images/delete_icon.png" width="15px" height="15px" >

It shown 404 error.

What i have tried

I have tried all below posibilities

<img src="../../assets/images/delete_icon.png" width="15px" height="15px" >
<img src="/assets/images/delete_icon.png" width="15px" height="15px" >
<img src="assets/images/delete_icon.png" width="15px" height="15px" >

Also i have tried the css way of doing it

.class1 {
    background: url("/assets/images/delete_icon.png" width="15px" height="15px""); // Doesnt work.404
}

.class2 {
    background: url("assets/images/delete_icon.png" width="15px" height="15px""); // Compiler error
}

.class3 {
    background: url("/../../assets/images/delete_icon.png" width="15px" height="15px"" width="15px" height="15px""); // 404
}

None of the methods work. How can i configure the asset path without appending the baseUrl manually as

Base+asset+imagePath

Please help. I am stuck.

Answer 1

You should be using ./assets/ for the path.

Also you need to make sure that assets is mentioned in angular.json under build --> options :

"assets": [
              "src/assets"
            ],