Question

我试图使用fileReader进行角度预览并创建数据url，但是图像从不加载svg，但是jpg等有效。

示例：stackblitz

我也尝试将其作为纯文本并将其作为innerHtml添加到可以工作的div中，但是图像的宽度：100mm和高度：100mm，这意味着图像无法缩放到其容器。我试图在css中更改此设置，但是它也不起作用...

示例：stackblitz

我还在src DIR中添加了一些svg img进行测试。

Answer 1

发生这种情况是出于安全原因。 svg和jpg/png之间的区别在于结构，因为svg使用xml，而jpg/png是位图。因此，当它们转换为base64时，svg是不受信任的，而jpg/png是受信任的。

Angular documentation说

例如，将网址绑定到超链接，将对someValue进行清理，以使攻击者无法注入一个javascript：将在网站上执行代码的URL。

更简单的方法

您只需将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 demo

不要忘记将SafePipe置于模块依赖项中。

角度SVG图片预览

1 个答案:

更简单的方法

更复杂的方式