Angular 5-不安全：数据：图像/八位字节流

Question

我有用json表示的数据； 我的问题是我无法读取以data:image/octet-stream开头的data:image/octet-stream 。

在执行过程中，控制台打印错误提示该字符串不安全。 错误如下：

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

我尝试了一些示例，但是它们没有用； 他们返回一串图像。 以下是我正在读取的json数据：

[
        {
            "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..."
        },
        ...
    ]

我有一堂课，我试图在其中解决此问题：

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;
}

和我的HTML如下：

<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>

我不知道该怎么解决。

Answer 1

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