英文:
How i can display image or images in angular template which is received from Asp.Net Rest Api as a base64 string
问题
以下是翻译好的部分：
"I'm posting advertisement by using angular v14 and asp.net rest api, the posted advertisement is in db by using byte[] property in rest api as a binary data, i want to display that posted advertisement on home page of my project and i received & display all other things like name, description but i can't display image while i received it as base64string from rest api like that "/9j/4QKKRXhpZgAASUkqAAgAAAAIAA8BAgAHAAAAbgAAABABAgAWAAAAdgAAA...." & i received it in angular same as above.
**Here in .net rest api i'm converting it into base64string & sending it to angular template **
public static ImageModel ToModel(this AdvertisementImage entity){return new ImageModel { Id = entity.Id, Base64Image = Convert.ToBase64String(entity.Contents) };}
It's Angular side template code
<div class="container-fluid"><div class="row"><div *ngFor="let adv of advs"><div class="col-12 col-sm-6 col-lg-3 col-xl-3"><a routerLink="details"><div class="card "><div *ngFor="let img of adv.images"><img src="img.Base64Image" class="card-img-top" alt="..."></div><div class="card-body"><div class="heading"><h4 class="text-center">{{adv.name}}</h4></div><p class="card-text">{{adv.description}}</p></div></div></a></div></div></div></div>
Component code
export class UserHomeComponent implements OnInit {advs: Advertisement[] = [];constructor(private advertisementService: AdvertisementsService) { }ngOnInit(): void {this.advertisementService.getAdvertisements().subscribe(data=>{for(let adv of data){for(let img of adv.images){console.log(img);}}this.advs = data;});}}
请注意，Angular 模板中的图片标签的src属性应该使用双括号包裹，像这样：<img [src]="img.Base64Image" class="card-img-top" alt="...">，以正确绑定数据。
英文:
I'm posting advertisement by using angular v14 and asp.net rest api,the posted advertisement is in db by using byte[] property in rest api as a binary data,i want to display that posted advertisement on home page of my project and i received & display all other things like name,description but i can't display image while i received it as base64string from rest api like that "/9j/4QKKRXhpZgAASUkqAAgAAAAIAA8BAgAHAAAAbgAAABABAgAWAAAAdgAAA...." & i received it in angular same as above.
**Here in .net rest api i'm converting it into base64string & sending it to angular template **
public static ImageModel ToModel(this AdvertisementImage entity){return new ImageModel { Id = entity.Id, Base64Image = Convert.ToBase64String(entity.Contents) };}
It's Angular side template code
<div class="container-fluid"><div class="row"><div *ngFor="let adv of advs"><div class="col-12 col-sm-6 col-lg-3 col-xl-3"><a routerLink="details"><div class="card "><div *ngFor="let img of adv.images"><img src="img.Base64Image" class="card-img-top" alt="..."></div><div class="card-body"><div class="heading"><h4 class="text-center">{{adv.name}}</h4></div><p class="card-text">{{adv.description}}</p></div></div></a></div></div>
Component code
export class UserHomeComponent implements OnInit {advs: Advertisement[] = [];constructor(private advertisementService: AdvertisementsService) { }ngOnInit(): void {this.advertisementService.getAdvertisements().subscribe(data=>{for(let adv of data){for(let img of adv.images){console.log(img);}}this.advs = data;});}
答案1
得分: 0
要显示base64图像，应提供以以下前缀开头的base64字符串：“data:{content/type};base64，”如文章所述，其中{content/type}是资源的内容类型。
最后，src的值应为：
data:image/png;base64,{base64string}
请注意，[src]会以方括号应用，因为我们希望将该值作为变量传递，而不是作为字符串化的值。
<img [src]="'data:image/image/png;base64,' + img.base64Image" class="card-img-top" alt="...">
请注意，属性名称区分大小写。如果您的JSON响应以驼峰命名法返回，请确保您的Base64Image也使用驼峰命名法。
export interface Image {...base64Image: string;}
英文:
To display the base64 image, you should provide the base64 string with the prefix: "data:{content/type};base64," as stated in the article, which {content/type} is the content type of the resource.
At the end, the value of src should be:
data:image/png;base64,{base64string}
Do note that [src] is applied with a square bracket as we want to pass the value as a variable, instead of a stringified value.
<img [src]="'data:image/image/png;base64,' + img.base64Image" class="card-img-top" alt="...">
Note that the property name is case-sensitive, if your JSON response returned is with camelCase, then your Base64Image should apply with camel case as well.
export interface Image {...base64Image: string;}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论