Image didn’t appear in my angular project

I am learning angular by following steps in a book and there’s a task that demanded creating a product component like in Amazon.For each product, we have an image, the product name, the product release date, the rating component and the number of ratings it has. I followed all steps but the image didn’t appear in after compiling my code.Can anyone find where the problem is and thank you.

app.component.ts

@Component({
  selector: 'app-root',
  template: `<products></products>`,
})
export class AppComponent {
  title = 'product-app';
}

products.component.ts

import { ProductService } from "../Services/product.service";

@Component({
    selector:'products',
    template:`
    <h2>Products</h2>
    <div *ngFor="let product of products">
    <product [data]="product"></product>
    </div>
    `,
    providers:[ProductService]
})

export class ProductsComponent{
    products;
    constructor(productService: ProductService){
      this.products = productService.getProducts();
    }
}

product.component.ts


@Component({
    selector: 'product',
    templateUrl: 'product.component.html',
    styles: [`
        .media {
            margin-bottom: 20px;
        }
    `]
})

export class ProductComponent{

    @Input() data:any;
}

product.component.html

  <a class="pull-left" href="#">
    <img class="media-object" data-src="data.imageUrl" />
  </a>
  <div class="media-body">
    <h4 class="media-heading">{{ data.productName }}</h4>
    {{ data.releasedDate }}
    <rating [rating-value]="data.rating" [numOfReviews]="data.numOfReviews">
    </rating>
    <br />
    {{ data.description }}
  </div>
</div>

product.service.ts

    getProducts() {
    return [
    {
    imageUrl: "http://loremflickr.com/150/150?random=1",
    productName: "Product 1",
    releasedDate: "May 31, 2016",
    description: "Cras sit amet nibh libero, in gravida... ",
    rating: 4,
    numOfReviews: 2
    },
    {
    imageUrl: "http://loremflickr.com/150/150?random=2",
    productName: "Product 2",
    releasedDate: "October 31, 2016",
    description: "Cras sit amet nibh libero, in gravida... ",
    rating: 2,
    numOfReviews: 12
    },
    {
    imageUrl: "http://loremflickr.com/150/150?random=3",
    productName: "Product 3",
    releasedDate: "July 30, 2016",
    description: "Cras sit amet nibh libero, in gravida... ",
    rating: 5,
    numOfReviews: 2
    }];
    }
    }

rating.component.ts

@Component({
    selector:'rating',
    templateUrl:'rating.component.html'
})

export class RatingComponent{
    @Input('rating-value') rating = 0;
    @Input() numOfReviews = 0;
    
    onClick(ratingValue:any){
        this.rating = ratingValue;
    }
}

rating.component.html

  <i
    class="glyphicon"
    [class.glyphicon-star-empty]="rating < number"
    [class.glyphicon-star]="rating >= number"
    (click)="onClick(number)"
  >
  </i>
</span>

index.html

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>ProductApp</title>
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css"
    />
  </head>
  <body>
    <app-root></app-root>
  </body>
</html>

Answer

You have to bind the src attribute of img tag, like below:

<img class="media-object" [src]="data.imageUrl" />

Advertisement

Answer