Angular2：JSON APIからHTMLに画像を表示する方法

私はIonicを初めて使用していて、現在、eコマースモバイルアプリを開発しています。 JSON APIを使用しています。画像以外のAPIからすべてのデータを取得できます.JSON APIからの画像は表示できません。自分のHTMLに画像を表示するにはどうすればいいのか分かりません。誰もが私を助けることを願って、先にありがとう。塔は、imgタグにバインドすることができますAngular2：JSON APIからHTMLに画像を表示する方法

product: [ 
     { 
     prod_id: 1, 
     supplier_id: 8, 
     prod_name: "Hippo + Friends Baby Boy Triangle Merino Pant", 
     prod_price: "250", 
     prod_stock: "20", 
     prod_image: "assets/img/4ef1ef51ef6e2f0142452af60048df44Merino Pants.jpg" 
    } 
    ]

出典

2017-09-01 Patrick

prod_imageは文字列を相対パスに戻すだけですが、実際にはこのAPIでイメージを戻すことはできません。イメージへの参照文字列です。イメージをBLOB型として送り返し、応答のために – Surreal

を表示することができます。イメージをPHPでBLOB型として送信するにはどうすればよいですか？ – Patrick

私はあまりPHPに精通していないので、ここではあまり助けにはならないでしょう。解決策が見つからない場合は、おそらく定義されたスコープで別の質問をしてください。 – Surreal

：

<div *ngFor="let pr of product"> 
    <img [src]="pr.prod_image" /> 
<div>

あなたがイメージをホストし、あなたがバイトを埋め込むことができ、APIによってそれを送信したくない場合はここのようなJSON APIがどのように見えるかですbase64文字列としてイメージタグ：

<img src="data:image/png;base64, BytesHere==" />

出典

2017-09-01 14:37:07 YD1m

彼の質問は、それをバインドするのではなく、APIからイメージを戻すことにもっと関連していると思う。 – Surreal

イメージバイトと背景イメージのスタイルを含むbase64文字列で行うことができます。 – YD1m

ありがとう@ YD1m、私はすでにbase64を試みたが、私のために働かなかった。 – Patrick

あなたはJSONレスポンスを介して画像のURLを送信し、サーバからイメージを取得し、表示する標準<img src="...">を使用することができます。

出典

2017-09-01 14:40:56 vijayvithal

の.htmlファイル

<img [src]="getImageUri(product.prod_image)" 
    alt="Image preview...">

.TSは、画像のホストの場所であろう

getImageUri(image: string): string { 
    if (!image) { 
    image = `/assets/img/noimage.jpg`; 
    } 

    const uri = `${environment.assets}/${image}`; 
    return uri; 
}

environment.assetsファイル。

例environment.assets = http://hostlocation.com/images;

これは、彼らがCMSのいくつかの種類を介して処理されるように、あなたがアプリであなたのイメージをバンドルされていない電子商取引サイトですので、私はと仮定しています。

出典

2017-09-01 14:40:56 VtoCorleone

Angular2：JSON APIからHTMLに画像を表示する方法

答えて

関連する問題