如何使用angular檢索路徑存儲在數據庫中的圖像？

Question

我想顯示存儲在數據庫中的圖像。 數據庫存儲圖像的路徑。 我想使用角度檢索圖像。 我怎樣才能做到這一點？

Answer 1

您需要創建一個服務來調用API以獲取圖像URL（我假設圖像存儲在JSON文件中）

   @Injectable()
    export class ConfigService {

      constructor(private http: HttpClient) { }

      getData() {
        return this.http.get('/assets/config.json');
      }
    }

創建組件ts文件以調用服務並返回圖像url

export class AppComponent {
  name = 'Test display image';
  thumbnail: any;
  constructor(private imageService: ConfigService, private sanitizer: DomSanitizer) { }

  ngOnInit() {
     this.imageService.getData()
      .subscribe((baseImage : any) => {

        let objectURL = baseImage.image;

         this.thumbnail = objectURL;

      });
  }
}

更新HTML文件以顯示圖像

<img width="100%" id="myimage" [src]='thumbnail' />

演示： https : //stackblitz.com/edit/display-imagepath-from-api