How to display image in angular ngFor from object url?

Question

for (let i = 0; i < newsValues.length; i++) {
  this.newsX[newsValues[i]] = {
    title: newsValues[i].title,
    date: newsValues[i].published_on,
    url: newsValues[i].url,
    body: newsValues[i].body,
    image: newsValues[i].imageurl,
    tags: newsValues[i].tags
  };
}

Here I get the response, and I made my own object with properties I need, everything works except the image when I pass it through *ngFor.

this is my Html part:

<nz-layout>
    <nz-content>
      <header>
        <h1>Cool Articles</h1>
      </header>
      <div class="band">
        <div class="item-7" *ngFor="let news of newsData">
          <a href="{{news.url}}" class="card">
            <div class="thumb" [style.background-image]="'url('+news.image+')'">
            </div>
            <article>
              <h1>{{news.title}}</h1>
              <span>Release Date: {{news.date | date: 'yyyy-MM-dd'}}</span>
            </article>
          </a>
        </div>
      </div>
   </nz-content>
</nz-layout>

must be work, see the value of news.images (if starts with a "/" or not, if is in the correct directory... — Eliseo
– Eliseo, Commented Mar 18, 2021 at 13:48
Goes like this Imageurl: "images.cryptocompare.com/news/default/ethereumworldnews.png" — andrijad durutov
– andrijad durutov, Commented Mar 18, 2021 at 13:50
I should suppose should be [style.background-image]="'url(https://'+news.image+')'". Else Angular try to find your image in a directory images.cryptocompare.com/news/default — Eliseo
– Eliseo, Commented Mar 18, 2021 at 17:12
Angular looks the files according the base href tag. if we don't put a "/" before the image, e.g. <img src="assets/images/imagen.jpg"> and base href is '/' and our app is in the directory c:/myapp, look for the file in c:/myapp/assets/images/imagen.jpg. In this case is equal use /assets/.... If your base href is another (imagine a multilanguage app where base href="/es-ES", if we don't put the / search in c:/myapp/es-ES/assets/images/imagen.jpg — Eliseo
– Eliseo, Commented Mar 18, 2021 at 17:18

Zam Abdul Vahid · Accepted Answer · 2021-03-18 14:11:32Z

1

Check if 'news.image' value has http/https protocol. If not you might have to add it to the original array or in the template.
```
image: newsValues[i].imageurl, //Check for http/https 
```
Make sure 'thumb' class has a height & width property attached to it.

Stackblitz - https://stackblitz.com/edit/angular-ewpahe?file=src/app/app.component.ts

edited Mar 18, 2021 at 14:11

answered Mar 18, 2021 at 14:05

Zam Abdul Vahid

2,7313 gold badges22 silver badges27 bronze badges

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

Comments

tmsbrndz · Accepted Answer · 2021-03-18 13:45:17Z

0

why you are not using img tag?

<img [src]="news.image" ...../>

answered Mar 18, 2021 at 13:45

tmsbrndz

1,3472 gold badges9 silver badges23 bronze badges

1 Comment

andrijad durutov Over a year ago

I tried that too, but only broken image thumbnail and empty div

Tyler2P · Accepted Answer · 2022-10-16 20:36:58Z

0

<img src = {{movie.Poster}} />

Works for me, after trial and error

edited Oct 16, 2022 at 20:36

Tyler2P

2,37030 gold badges26 silver badges34 bronze badges

answered Oct 15, 2022 at 1:57

David Larew

1

Collectives™ on Stack Overflow

How to display image in angular ngFor from object url?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related