Блог

Главная - Вопросы по программированию - Как отобразить изображение в угловом ngFor из URL-адреса объекта?

Как отобразить изображение в угловом ngFor из URL-адреса объекта?

#angular

Вопрос:

 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
  };
}

Здесь я получаю ответ, и я создал свой собственный объект со свойствами, которые мне нужны, все работает, кроме изображения, когда я его пропускаю *ngFor .

это моя Html-часть:

 <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>

Комментарии:

1. должна быть работа, см. значение news.images (если начинается с «/» или нет, если находится в правильном каталоге…

2. Звучит примерно так: » images.cryptocompare.com/news/default/ethereumworldnews.png »

3. Я полагаю, так и должно быть [style.background-image]="'url(https://' news.image ')'" . В противном случае Angular попытается найти ваше изображение в каталоге images.cryptocompare.com/news/default

4. Угловой просматривает файлы в соответствии с base href тегом. если мы не поставим «/» перед изображением, например <img src="assets/images/imagen.jpg"> , и базовая ссылка будет»/», и наше приложение будет в каталоге c:/myapp, поищите файл в c:/myapp/assets/images/imagen.jpg . В этом случае равное использование / активов/…. Если ваша базовая ссылка-другая (представьте себе многоязычное приложение , в котором base href="/es-ES" , если мы не введем / поиск в c:/myapp/es-ES/assets/images/imagen.jpg

Ответ №1:

почему вы не используете img tag?

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

Комментарии:

1. Я тоже пробовал, но только сломанный эскиз изображения и пустой div

Ответ №2:

  • Проверьте, имеет ли значение «news.image» протокол http/https. Если нет, вам, возможно, придется добавить его в исходный массив или в шаблон. 
     image: newsValues[i].imageurl, //Check for http/https
  • Убедитесь, что к классу ‘thumb’ прикреплено свойство height amp; width.

Стакблитц — https://stackblitz.com/edit/angular-ewpahe?file=src/app/app.component.ts

Метки: