Angular 5 - unsafe:data:image/octet-stream

Question

I have data represented in json ; my problem is that I cannot read images starting with data:image/octet-stream .

During execution, the console print's an error that the string is unsafe. The error is as follows:

unsafe:data:image/octet-stream;base64,/9j/4AAQSkZJRgABAQEBMQExAAD/7S6...

I have tried a few examples, but they do not work; they return a string of the images. Below is the json data I am reading:

[
        {
            "id": 1,
            "name": "Albany",
            "manufacture": "Albany Superior Low Gi Sliced Brown Seed Bread 700g",
            "price": 15.49,
            "category": "Food",
            "type": "Breads",
            "image": "data:image/jpeg;base64,/9j/4AAQSkZJRgA..."
        },
        {
            "id": 2,
            "name": "Blue Ribbon",
            "manufacture": "Blue Ribbon Brown Plus Low Gi Bread 700g",
            "price": 13.99,
            "category": "Food",
            "type": "Breads",
            "image": "data:image/octet-stream;base64,/9j/4AAQSkZJRgABA..."
        },
        ...
    ]

I have a class in which I was trying to implement a hack to this problem:

export class MilkCreamComponent implements OnInit {

  allProducts: Array<Product> = [];
  quantity: number = 1;
  resultArray:any;
  milkProducts =[]

  constructor( private prod: ProductService, public _DomSanitizer: DomSanitizer) { }

  ngOnInit() {

    this.allProducts = JSON.parse(localStorage.getItem('product-data') );
    //console.log( JSON.stringify( this.allProducts ) );

    var productMilk = this.allProducts.filter(item => item.type === 'Milk');
    this.milkProducts = productMilk;

    console.log( productMilk );
  }
}

interface Product {

  id: number;
  name: string;
  manufacture: string;
  price: number;
  category: string;
  type: string;
  image: string;
}

And my html is as follows:

<tr *ngFor="let prod of milkProducts">
    <td><img src={{prod.image}}   width="120" height="130"/></td>
    <td>{{prod.name}}</td>
    <td>{{prod.manufacture}}</td>
    <td>R {{prod.price}}</td>

    <td><button class="btn btn-primary">data boy</button></td>
</tr>

I do not know how to solve this.

Answer 1

您的json中的图片网址是base64格式，首先您必须将base64转换为普通图片来源，然后才能在HTML模板上显示图片。