Display Image to HMTL from API

Hi Master,

I want to display image from data API to HTML.
For your reference please see code below.

HTML

ion-header>
  <ion-toolbar>
    <ion-buttons end>
        <button (click)="shopingCart()">
            <ion-icon class="ionIcon" md="md-cart" ios="ios-cart"></ion-icon>
          </button> 
      </ion-buttons>
    
  <ion-navbar>
    <ion-title>Produk</ion-title>
  </ion-navbar>
</ion-toolbar>
</ion-header>

 <!--(tap)=depth3(takeData)-->
<ion-content>
    <ion-list>
      <ion-item class="page-produk" *ngFor="let takeData of listProduct">
        <button (tap)="productDetail(takeData)">Product Name: {{takeData.name}}</button> 
        <h3>Harga :{{takeData.cogs | number:'1.0-0'}}</h3>
        <ion-thumbnail>
          <ion-img style="width: 640px; height: 480px;" (tap)="productDetail(takeData)" src="http://127.0.0.1{{takeData.image_name}}"></ion-img>
        </ion-thumbnail> 

      </ion-item>
    </ion-list>
</ion-content>

file .ts


import { Component } from '@angular/core';
import { NavController, NavParams, LoadingController } from 'ionic-angular';
import { HttpClient } from '@angular/common/http';
import { Storage } from '@ionic/storage';
import { ProdukDetailPage } from '../produk-detail/produk-detail';
import { ShopCartPage } from '../shop-cart/shop-cart';

@Component({
  selector: 'page-produk',
  templateUrl: 'produk.html',
})
export class ProdukPage {
  inventori: any;



  constructor(public navCtrl: NavController, 
    public navParams: NavParams,
    public http: HttpClient,
    public httpClient: HttpClient,
    public loadingCtrl: LoadingController,
    private storage: Storage) {
      this.selectProduct()
  }
  selectProduct(){
    let loader = this.loadingCtrl.create();
    loader.present();

    let filter = [];

          filter.push({
            field: 'location_id',
            operator: 'eq',
            value: '1',
            mode: 'and'
            });
       
          filter.push({
            field: 'category_id',
            operator:'eq',
            value: this.navParams.get('id'),
            mode: 'and'
      });
  
    let param = { 
      api_token: '086090c7-2c12-4f00-9ac1-1234e3324a51',
      filter: JSON.stringify(filter)

    };  

   this.storage.get('user_api').then((userApi => {
    let apiUrl = userApi+'/products';
    this.httpClient.post(apiUrl, null, {params: param}).subscribe(
    getData => {
        this.listProduct= getData['products'];
        loader.dismiss();
    }, err => {
        console.log(err);
       });
    }));
 
  
  }
  productDetail(takeData){
    this.navCtrl.push(ProdukDetailPage, {
      id:takeData.product_id 
   });
  
  }
  
  ionViewDidLoad() {
    console.log('ionViewDidLoad ProdukPage');
    
  }
  shopingCart(){
    this.navCtrl.push(ShopCartPage)
  }
}

data from API JSON

"products": [
        {
            "id": 5,
            "cogs": "55000.000",
            "name": "D-200/PJ",
            "image_name": "5_1228022203.jpg",
            "inventory__quantity": 55
        },

i hope you can help me. thank you

try src="{{ ‘http:127 whatever…’+takedata.image_name }}"

1 Like