Предварительный просмотр угловых svg - PullRequest
Новая
       6

Предварительный просмотр угловых svg

0 голосов
/ 29 апреля 2019

Я пытаюсь сделать предварительный просмотр изображения с помощью angular, используя fileReader и создавая URL-адрес данных, но изображение никогда не загружает svg, но jpg и т. Д. Работает.

пример: stackblitz

Я также попытался взять его как обычный текст и добавить его как innerHtml к div, который работает, но изображение имеет ширину: 100 мм и высоту: 100 мм, что означает, что изображение не масштабируется до своего контейнера. Я пытался изменить это в CSS, но это тоже не сработало ...

пример: stackblitz

Я также добавил svg img в src DIR для тестирования.

1 Ответ

1 голос
/ 23 мая 2019

Это происходит из-за безопасности.Разница между svg и jpg/png заключается в структуре, поскольку svg использует xml, а jpg/png - растровые изображения.Поэтому, когда они переводятся в base64 svg, это не заслуживает доверия, а jpg/png является доверенным.

Как Документация на английском языке говорит

Например, когдаПри привязке URL-адреса к гиперссылке someValue будет подвергнута дезинфекции, поэтому злоумышленник не сможет внедрить, например, URL-адрес javascript :, который будет выполнять код на веб-сайте.

Более простой способ

Вы можетепросто добавьте bypassSecurityTrustUrl() к вашему методу

Так это будет выглядеть так 

  selectedImageChanged(event) {
    const fileReader = new FileReader();
    fileReader.onload = async e => {
      const value = this.sanitizer.bypassSecurityTrustUrl(fileReader.result as string);
      this.previewFileUrl = value;
    }
    fileReader.readAsDataURL(event.target.files[0]);
  }

Более сложный способ

Второй возможный способ - создать трубу, которая будет выполнятьто же самое. 

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml, SafeStyle, SafeScript, SafeUrl, SafeResourceUrl } from '@angular/platform-browser';

@Pipe({
  name: 'safe'
})
export class SafePipe implements PipeTransform {

  constructor(protected sanitizer: DomSanitizer) {}

 public transform(value: any, type: string): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
    switch (type) {
            case 'html': return this.sanitizer.bypassSecurityTrustHtml(value);
            case 'style': return this.sanitizer.bypassSecurityTrustStyle(value);
            case 'script': return this.sanitizer.bypassSecurityTrustScript(value);
            case 'url': return this.sanitizer.bypassSecurityTrustUrl(value);
            case 'resourceUrl': return this.sanitizer.bypassSecurityTrustResourceUrl(value);
            default: throw new Error(`Invalid safe type specified: ${type}`);
        }
  }
}

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

<img [src]="previewFileUrl | safe: 'url'" alt=alt/>

Демонстрация Stackblitz

Не забудьте поместить SafePipe в зависимости от модуля.

...