Question

我的数据以json表示;我的问题是我无法读取以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模板上显示图像..

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

1 个答案: