Web API làm backend, làm sao để return lại image cho frontend (angular, nodejs,...)

Return lại cái url thôi

Mới làm được Mình đang học Angular 4, nếu bạn cũng học Angular 4 thì nên theo tutorial này trước https://angular.io/tutorial/ Nó hướng dẫn cơ bản về Angular như tạo component, add component, service, module vào app module, nhập xuất, show model ra html, pipe, Two-way binding, các directive thông dụng, event binding, service, routing, in-memory-web-api, httpclient

image.png1600x860 98.8 KB

Add HttpClientModule, HttpClient, HttpHeaders vào App Module (xem tutorial nha)

Tạo service call API. Của mình trả về string. VD như function bên dưới call API hist của https://puush.me, trong đó có url. API này là HttpPost một formdata, nếu của bạn là HttpGet thì dùng this.http.get(url)

http là instance của HttpClient thêm từ constructor (xem tutorial)

callHistAPI(body: FormData): Observable<string> {
  return this.http.post(this.historyApi, body, { responseType: 'text' });
}

Sau đó trong component, call service. VD mình tạo function lấy data từ hist sang model Image

async loadGallery() {
    // Lấy account để lấy api key
    const account = this.accountService.getAccount();

    // Tạo formdata, puush dùng formdata, không phải json, json chỉ cần tạo object thôi
    const body = new FormData();
    body.append('k', account.k);
    body.append('z', this.puushService.appUseragent);

    // Call api và dùng await để chờ data trả về
    await this.puushService.callHistAPI(body).pipe().subscribe((data) => {
      // Parse data...
      let rows = data.split('\n');
      let status = +rows[0];

      if (status != -1) {
        for (let i = (rows.length - 2); i > 0; i--) {
          let values = rows[i].split(',');
          let item: Item = {
            id: +values[0],
            timelapse: new Date(values[1]),
            url: values[2],
            filename: values[3],
            seen: +values[4]
          }
          this.messageService.log(`item ${JSON.stringify(item)}`);
          this.items.push(item);
        }
        this.messageService.log(`GalleryComponent: Fetched ${this.items.length} items.`);
      } else {
        this.messageService.log(`GalleryComponent: Failed to fetch data.`);
        this.messageService.log('Login failed, navigating to login...');
        this.router.navigate(['/login']);
      }
    });
  }

Trong html, dùng [src] và [alt] để gán giá trị của model

<div class="container fluid">
  <h2>Gallery</h2>
  <div *ngFor="let item of items">
    <img [src]="item.url" [alt]="item.filename">
  </div>
</div>

Hoặc dùng {{model.property}}

<div class="container fluid">
  <h2>Gallery</h2>
  <div *ngFor="let item of items">
    <img src="{{item.url}}" alt="{{item.filename}}">
  </div>
</div>

Tại sao lại có nhu cầu này nhỉ?

Cảm @SakaDream rất nhiều luôn, mình dạng đã làm web PHP, ASP.NET MVC nhưng chưa làm dạng chia ra Fontend, Backend theo xu hướng bây giờ nên cứ cần cái nào là bụp bụp cái đó.

Có chia sẽ của bạn mình nghĩ phải đi từ basic chắc nắm được luồng chạy code tốt hơn.
Bạn góp ý nhiệt từ quá hen, cảm ơn những member như bạn