[英]Angular - Img src attribute doesn't render SVG
我有一个来自后端的 SVG 文件,当我尝试在前端 Angular(v11) 应用程序中显示它时,它不会呈现并且看起来已损坏。
这是我的代码:
<div fxLayout="column" *ngFor="let svgFile of activePageDataChunk">
<img src="data:image/svg+xml,svgFile">
这是它的样子:
这是 SVG 里面的内容:
<svg xmlns="http://www.w3.org/2000/svg" width="420mm" height="297mm">
<rect width="100%" height="100%" id="paperBorder" fill="#FFF"/>
<svg id="margins" x="5mm" y="5mm">
<svg x="38.200050592422485mm" overflow="visible">
<svg class="level_marker" x="0mm" y="28.509538173675537mm" overflow="visible">
<text class="level_marker_text" font-size="12" y="-6" x="6mm" text-anchor="start">+0.000</text>
<line x1="0" y1="0" x2="20mm" y2="0" fill="none" stroke="#231f20" stroke-miterlimit="10"/>
<line x1="0" y1="0" x2="2.5mm" y2="2.5mm" fill="none" stroke="#231f20" stroke-miterlimit="10"/>
<line x1="2.5mm" y1="2.5mm" x2="5mm" y2="0mm" fill="none" stroke="#231f20" stroke-miterlimit="10"/>
</svg>
<svg class="level_marker" x="0mm" y="-2.490461826324463mm" overflow="visible">
<text class="level_marker_text" font-size="12" y="-6" x="6mm" text-anchor="start">+3.100</text>
<line x1="0" y1="0" x2="20mm" y2="0" fill="none" stroke="#231f20" stroke-miterlimit="10"/>
<line x1="0" y1="0" x2="2.5mm" y2="2.5mm" fill="none" stroke="#231f20" stroke-miterlimit="10"/>
<line x1="2.5mm" y1="2.5mm" x2="5mm" y2="0mm" fill="none" stroke="#231f20" stroke-miterlimit="10"/>
</svg>
</svg>
</svg>
<svg x="0mm" y="195mm" width="83mm" height="22mm">
<rect width="100%" height="100%" fill="none" stroke="#666"/>
<text x="1mm" y="2.5mm" font-size="2mm" font-family="DINPro-Light, DIN Pro" font-weight="300" style="isolation:isolate"/>
<text x="1mm" y="7.5mm" font-size="4.5mm" font-family="DINPro, DIN Pro" style="isolation:isolate"/>
</svg>
<svg x="0mm" y="247mm" width="27.5mm" height="10mm">
<rect width="100%" height="100%" fill="none" stroke="#666"/>
<text x="1mm" y="2.5mm" font-size="2mm" font-family="DINPro-Light, DIN Pro" font-weight="300" style="isolation:isolate">DATE</text>
<text x="1mm" y="7.5mm" font-size="4.5mm" font-family="DINPro, DIN Pro" style="isolation:isolate">2.6.2022</text>
</svg>
<svg x="0mm" y="257mm" width="83mm" height="10mm">
<rect width="100%" height="100%" fill="none" stroke="#666"/>
<text x="1mm" y="2.5mm" font-size="2mm" font-family="DINPro-Light, DIN Pro" font-weight="300" style="isolation:isolate">SCALE</text>
<text x="50%" y="50%" alignment-baseline="central" text-anchor="middle" font-size="4.5mm" font-family="DINPro, DIN Pro" style="isolation:isolate">1:100</text>
</svg>
<svg x="0mm" y="277mm" width="83mm" height="10mm">
<rect width="100%" height="100%" fill="none" stroke="#666"/>
<text x="1mm" y="2.5mm" font-size="2mm" font-family="DINPro-Light, DIN Pro" font-weight="300" style="isolation:isolate">DRAWN BY</text>
<text x="1mm" y="7.5mm" font-size="4.5mm" font-family="DINPro, DIN Pro" style="isolation:isolate"/>
</svg>
</svg>
正如评论中所讨论的,提供的数据是一个 SVG 元素,因此您不能将该值绑定到<img>
元素的 src。
有两种方法可以做到:
<img>
元素。DOMSanitizer
。回答 1
要将 SVG 文件转换为 base64 字符串,请参考以下问题: Convert inline SVG to Base64 string
import { DomSanitizer } from '@angular/platform-browser';
constructor(private _sanitizer: DomSanitizer) {}
getSVGImageUrl(image) {
let base64string = btoa(image);
return this._sanitizer.bypassSecurityTrustResourceUrl(
`data:image/svg+xml;base64,${base64string}`
);
}
<div *ngFor="let svgFile of activePageDataChunk">
<img [src]="getSVGImageUrl(svgFile)" />
</div>
答案 2 :
import { DomSanitizer } from '@angular/platform-browser';
constructor(private _sanitizer: DomSanitizer) {}
getSVGImage(image) {
return this._sanitizer.bypassSecurityTrustHtml(`${image}`);
}
<div *ngFor="let svgFile of activePageDataChunk">
<div [innerHTML]="getSVGImage(svgFile)"></div>
</div>
参考
警告:清理不安全样式值 url (类似问题)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.