Angular 6 - Image loaded from http observable not updating in the view

Question

I am struggling to make my code work where I am using angular in-memory data simulator and trying to load it using http through observable. My issue is all the text fields updates as observable returns data but the image goes blank. It looks as if the image given at the component is fixed at the load and can't be updated later. I can see the console log and correct data is being returned but it doesn't reflect on the component.

Can you please help me here to load this image dynamically. For now I have kept image locally under assets folder but later it will be read from real api.

banner.component.ts

import { Component, OnInit } from '@angular/core';

import { BannerDS } from './banner-ds';
import { BannerService } from './banner.service';


@Component({
  selector: 'app-banner',
  templateUrl: './banner.component.html',
  styleUrls: ['./banner.component.css']
})
export class BannerComponent implements OnInit {

  bannerLoaded = false;
  banner: BannerDS;

  constructor(private bannerService: BannerService) { }

  ngOnInit() {
    this.getBanner();
  }

  getBanner(): void {
    this.bannerService.getBanner()
        .subscribe(banner => {
          this.banner = banner;
          this.bannerLoaded = true;
          console.log(banner);
        });
  }

}

banner.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { catchError, map, tap } from 'rxjs/operators';

import { BannerDS } from './banner-ds';


@Injectable({
  providedIn: 'root'
})

export class BannerService {

  private bannerUrl = 'api/banner';  // URL to web api

  constructor(private http: HttpClient) { }

  /** GET heroes from the server */
  getBanner(): Observable<BannerDS> {
    return this.http.get<BannerDS>(this.bannerUrl);
  }

}

banner-ds.ts

export interface BannerDS {
    id: number;
    date: string;
    from: string;
    quote: string;
    image: string;
    likes: number;
    comments_count: number;
}

banner.component.html

<!-- start banner Area -->
<section class="banner-area relative" id="home" data-parallax="scroll" attr.src="{{banner?.image}}" *ngIf="bannerLoaded">
<div class="overlay-bg overlay"></div>
<div class="container">
    <div class="row fullscreen">
        <div class="banner-content d-flex align-items-center col-lg-12 col-md-12">
            <h1>
                {{banner?.quote}}
                <!-- &ldquo;The world is a book<br>
                and those who do not travel read only one page.&rdquo;<br>
                - Augustine of Hippo -->
            </h1>
        </div>  
        <div class="head-bottom-meta d-flex justify-content-between align-items-end col-lg-12">
            <div class="col-lg-6 flex-row d-flex meta-left no-padding">
                <p><span class="lnr lnr-heart"></span> {{banner?.likes}}</p>
                <p><span class="lnr lnr-bubble"></span> {{banner?.comments_count}}</p>
            </div>
            <div class="col-lg-6 flex-row d-flex meta-right no-padding justify-content-end">
                <div class="user-meta">
                    <h4 class="text-white">{{banner?.from}}</h4>
                    <p>{{banner?.date}}</p>
                </div>
                <img class="img-fluid user-img" src="./assets/img/afsar.jpg" alt="">
            </div>
        </div>                                              
    </div>
</div>
</section>
<!-- End banner Area -->    

banner json

const banner = { id: 11,
        date: '15 April, 2018 12:46 pm',
        from: 'Afsar Imam',
        quote: 'The world is a book and those who do not travel read ony one page. - Augustine of Hippo',
        image: 'src/assets/img/main-bg2.jpg',
        likes: 15,
        comments_count: 6
      };

Answer 1

The thing is, you cannot use <section /> to load a image, you can use <img src="..." /> or <picture > <source srcset="..." /> </picture>. That is why you are getting the error:

Uncaught Error: Template parse errors: Can't bind to 'image-src' since it isn't a known property of 'section

In any case, I think you want to load the image on the <img /> element you already have:

<img class="img-fluid user-img" src="{{banner?.image}}" alt="">