ANGULAR 11 - 当我构建我的 angular web 应用程序并部署我的主机时，无法从资产中获取图像

Question

I have an Angular11 web app. When I build and deploy the app to my host, there is a "GET http//../assets/image.png" error. I don't know how to fix it? Can anyone please help me?

Here is my HTML code:

<img class="pic" src="../../assets/pic.png" alt="">

**I am sure that my image path is absolutely true.

And angular.json:

"assets": [
          "src/favicon.ico",
          "src/assets",
          "src/.htaccess"
          ],

I have tried to change <img class="pic" src="../../assets/pic.png" alt=""> to <img class="pic" src="/assets/pic.png" alt=""> but doesn't work.

And I also realize that when I am moving it to (public-html/fileName/MYAPPISHERE) path into the host but the error is like "GET https//.....com/assets/image.png". Shouldn't it be like "https//..com/fileName/assets/image.png"?

Answer 1

If it's a manual deployment/build, I guess you miss the base-href option that allow you to specify the subfolder your app is deployed in. So the command should be something like:

ng build --prod --base-href /fileName/

to tell the builder to build the pathes (To the assets and API call and others) with the specified subfolder.