要从Firebase获取图像并在Angular 7中显示,可以按照以下步骤操作:
npm install firebase @angular/fire --save
src/environments/environment.ts
文件,并添加以下代码:export const environment = {
production: false,
firebaseConfig: {
apiKey: 'YOUR_FIREBASE_API_KEY',
authDomain: 'YOUR_FIREBASE_AUTH_DOMAIN',
databaseURL: 'YOUR_FIREBASE_DATABASE_URL',
projectId: 'YOUR_FIREBASE_PROJECT_ID',
storageBucket: 'YOUR_FIREBASE_STORAGE_BUCKET',
messagingSenderId: 'YOUR_FIREBASE_MESSAGING_SENDER_ID'
}
};
请确保将YOUR_FIREBASE_API_KEY,YOUR_FIREBASE_AUTH_DOMAIN等替换为您自己的Firebase项目的详细信息。
app.module.ts
文件中,导入Angular Fire模块并添加到imports
数组中:import { AngularFireModule } from '@angular/fire';
import { environment } from '../environments/environment';
@NgModule({
imports: [
AngularFireModule.initializeApp(environment.firebaseConfig),
// other imports
],
// other configurations
})
export class AppModule { }
import { Component } from '@angular/core';
import { AngularFireStorage } from '@angular/fire/storage';
@Component({
selector: 'app-my-component',
template: `
`
})
export class MyComponent {
imageURL: string;
constructor(private storage: AngularFireStorage) {
const ref = this.storage.ref('path_to_image_in_firebase_storage');
ref.getDownloadURL().subscribe(url => {
this.imageURL = url;
});
}
}
请确保将'path_to_image_in_firebase_storage'替换为您Firebase存储中图像的路径。
现在,当组件加载时,它将从Firebase Storage获取图像的下载URL,并将其绑定到图像元素的src
属性上,从而在Angular应用程序中显示图像。
这就是从Firebase获取图像并在Angular 7中显示的解决方法的示例代码。希望对您有所帮助!