以下是一个使用Angular 7从数据库中显示字节的图像的解决方案,包含代码示例:
image.component.ts
的组件。import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-image',
templateUrl: './image.component.html',
styleUrls: ['./image.component.css']
})
export class ImageComponent implements OnInit {
imageUrl: string;
constructor(private http: HttpClient) { }
ngOnInit() {
this.getImageFromDatabase();
}
getImageFromDatabase() {
this.http.get('your-api-url').subscribe((data: any) => {
this.imageUrl = 'data:image/jpeg;base64,' + data.imageBytes;
});
}
}
image.component.html
中使用img
标签来显示图像。
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { ImageComponent } from './image.component';
@NgModule({
declarations: [
AppComponent,
ImageComponent
],
imports: [
BrowserModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
your-api-url
为你的API端点,该端点返回一个包含图像字节数组的响应。确保你的API正确返回了图像字节数组。这样,当你在应用程序中加载ImageComponent
时,它将从数据库中获取图像字节数组,并将其转换为Base64编码的图像URL,然后在页面中显示图像。