4

I am new to Angular. I created a small web application with 2 images. The images are in myapp/src/assets/img1.jpg. On my local machine, everything works fine. When I call locasthost:4200 I can see the images, but when I upload the content of the dist folder (created with ng build --prod) to my web server, the images cannot be found.

my web server: abc.host.com/~user1/myapp

Parts (myapp) of the path are cut off. e.g. abc.host.com/~user1/assets/img1.jpg.

What <base href=""> should I use? What img src path to use so that images are shown on web server too? the following did not work:

<img src="/assets/img/img1.jpg" alt="/assets/img/img1.jpg">
<img src="../assets/img/img1.jpg" alt="../assets/img/img1.jpg">

I would like to keep everything relative.

SOLUTION:

  1. use <base href="./"> in your index.html
  2. <img src="assets/img/img1.jpg" alt="assets/img/img1.jpg">

My web server will now get the img from: abc.host.com/~user1/myapp/assets/img/img1.jpg

Improve this question
2
  • 2
    try <base href="./"> Commented May 27, 2018 at 0:15
  • ok, that helped! Commented May 27, 2018 at 0:55

4 Answers 4

Reset to default
7

It all depends on the base href you are providing in the index.html. All the images should be kept under 'assets' folder. And the path for any image in the project must be relative starting from this folder ie.

src="assets/img/img1.jpg"

As doing this, will remove the difficulty of file not found, which will arise in the deployment of the application.

Now, these steps will do the rest.

  • ng build --prod --base-href   /myApp - this command will add the base-href='/myApp' to index.html
  • Create folder myApp in the server's deployment folder, say in case of tomcat make this folder in webapps.
  • Copy the contents of dist folder to this myApp folder.
  • Run the server.

Application will be accessible at http://localhost:8080/my_app

If you dont want the context 'myApp' for your application, then try doing base href='./'

This helped in my case. Hope, it helps.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

It depends on where your html file exists. According to your data there might be three possibilities:

<img src="src/assets/img/img1.jpg" alt="My image"/>
<img src="assets/img/img1.jpg" alt="My image"/>
<img src="img/img1.jpg" alt="My image"/>
Improve this answer

1 Comment

The source reference is counting relatively to the html file position. In your case it exists in the same folder as "assets" - in a "src" folder. In case you would want to get any file out of "src" folder, you should use "../[other folder]"
0

What <base href=""> should I use?

Depends on your configuration but in general it should point to your entry point of application. So if your app is available on lets say example.com then base href will be /

If you app is available under exampl.com/some/path then base href should be like /some/path/

Improve this answer

2 Comments

hmm but on my local machine the images are under myapp/src/assets/img1.jpg. The "/some/path" will conflict with "myapp/src"
I don't understand
0

by passed this by adding two sets of images.

<img src="assets/image/tlsTitle16.gif"  onerror="this.onerror=null;this.src='ProjectName/assets/image/tlsTitle16.gif';" />
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.