这个错误通常出现在使用Angular和Firebase Storage时,尝试获取Firebase Storage中的图像资源时出现问题。下面是解决这个问题的一些步骤和示例代码:
npm install @angular/fire firebase
app.module.ts
中导入 AngularFireModule和AngularFireStorageModule:import { AngularFireModule } from '@angular/fire';
import { AngularFireStorageModule } from '@angular/fire/storage';
@NgModule({
declarations: [
// ...
],
imports: [
AngularFireModule.initializeApp(environment.firebaseConfig),
AngularFireStorageModule,
// ...
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
确保在environment.ts
或environment.prod.ts
中配置了Firebase的配置信息。
import { AngularFireStorage } from '@angular/fire/storage';
export class YourComponent {
constructor(private storage: AngularFireStorage) { }
}
ref
方法来创建一个引用,并使用getDownloadURL()
方法来获取图像的URL:export class YourComponent {
imageURL: string;
constructor(private storage: AngularFireStorage) { }
getImageURL() {
const ref = this.storage.ref('path_to_your_image.jpg');
ref.getDownloadURL().subscribe(url => {
this.imageURL = url;
}, error => {
console.log(error);
});
}
}
在上面的代码中,path_to_your_image.jpg
是你存储在Firebase Storage中的图像的路径。
![]()
标签来显示图像:
确保在组件中调用getImageURL()
方法来获取图像URL,并将其分配给imageURL
变量。
这些步骤应该帮助你解决“Angular 9 | Firebase Storage | GET 404错误在[object%20HTMLImageElement]上”的问题,并成功获取Firebase Storage中的图像资源。