我尝试如下
应用程序组件.ts
import { Component } from '@angular/core';
import { ConfigService } from './config.service';
import { SettingsService } from './settings.service';
import { DomSanitizer } from '@angular/platform-browser';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
name = 'Test display image';
imgbytData: any;
imageBytes: Uint8Array;
backgroundimg: any;
constructor(private sanitizer: DomSanitizer
) {}
ngOnInit() {
this.config.getData().subscribe((baseImage: any) => {
this.backgroundimg = this.sanitizer.bypassSecurityTrustUrl('data:image/jpeg;base64,' + baseImage.backgroundimg);
this.imageBytes = new Uint8Array(baseImage.image);
const base64String = btoa(String.fromCharCode(baseImage.image));
this.sampleimg = `url(data:image/jpeg;base64,${base64String})`;
console.log(this.sampleimg);
});
}
}
app.component.html
<hello name="{{ name }}"></hello>
<img id="myimage" [src]="backgroundimg" width="100px" height="70px"/>
<div [style.background-image]="sampleimg">
This is new DIV Tag
</div>
config.json文件包含图片字节数组的硬编码JSON数据。
问题是<Img>
标记正在渲染,但在样式标记中使用时,它不显示图像数据。
1条答案
按热度按时间7kqas0il1#
您可以使用CSS来获得正确的大小:
HTML
CSS:
TS: