Показать изображение, нажав на кнопку

Question

Я пытаюсь отобразить изображение в новом окне после нажатия кнопки.

Однако иногда это невозможно.

Component.ts

displayMyImage()
    {
    this.http.get(this.imagePath, {observe: 'response', responseType: 'blob'}).pipe(map(res =>
            {
               return new Blob([res.body], {type: res.headers.get('Content-Type')});
            })).subscribe(hi =>
            {
                const xx = URL.createObjectURL(hi);
                window.open(xx);
            });
}

Компонент. html

<span (click)='displayMyImage()'>Display</span> 

или

<button (click)="displayMyImage()">Display</button>

Я получил это исключение

Не могли бы вы сказать мне, что я пропустил? Большое спасибо.

Answer 1

Вы можете объявить функцию, как показано ниже, чтобы получить предварительный просмотр изображения. Я полагаю, что у вас есть imagePath там.

displayMyImage() {

    var imagePath = "https://www.howtogeek.com/wp-content/uploads/2018/06/shutterstock_1006988770.png";
    window.open(
      imagePath,
      "Image",
      "width=largeImage.stylewidth,height=largeImage.style.height,resizable=1"
    );
}

Надеюсь, это поможет.

Answer 2

Может быть, что-то подобное поможет.

document.getElementById('bigpic').style.display='block';