CODEWITHSUNDEEP
angular
William
William

Reputation: 502

Images not being loaded through img tag in html

I have a project and I'm trying to add an image to a component through img tag in html file, that is located in angularNode7Teste/thumbsup-jpg (the app root folder). The component files are located in angularNode7Teste/src/app folder.

Here is the code from my app.component.html:

<h1>
 {{title}}
</h1>

<input type="button" class="btn btn-default" value="Send" >
<img src="../../thumbs-up.jpg"/>
<div class="image"></div>

This is the app.component.css file:

div.image {
    content: url(../../thumbs-up.jpg);
}

The image in <img src="../../thumbs-up.jpg"/> doesn't renderize, but the div tag <div class="image"></div> is renderizing normally.

The image is the same in both tags, I'm referencing the same image to see if it works but it doesn't.

Upvotes: 0

Views: 1223

Answers (1)

andreim
andreim

Reputation: 3503

Angular index.html contains the <base href="/"> element which sets the base path for your URLs. So you will need to check this element href attribute value. Angular uses this element for routing purposes.

Regarding <img>: If src URL is relative then will be relative in respect to the href value of <base> element.

Regarding CSS url(): URL will be relative to the CSS file.

Example:

Having an image located in Angular CLI project at src/assets/img/mypic.jpg.

Then this will work <img src="assets/img/mypic.jpg" />.

For the CSS file located at src/app/app.component.css the following will be valid:

.pic {
  background-image: url('../assets/img/mypic.jpg');
  width: 256px;
  height: 256px;
}

Upvotes: 2

Related Questions