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

findersln96 · February 20, 2018, 1:38pm

Mình đang học cách làm web angular fontend kết hợp asp.net core web api làm backend, làm thế nào để phía web api return lại 1 hình ảnh khi bên fontend là Angular có một element img sử dụng link bên phía web api vậy mọi người ơi.
VD bên angular có một element img:

<img src="http://localhost:11713/api/images" alt="Preformatted textNo images">

Thì bên controller API phải sử lý như thế nào để bên template này hiển thị ra hình ảnh vậy mọi người, xin mọi người giúp đỡ ạ!

kisuluoibieng · February 20, 2018, 3:12pm

Return lại cái url thôi

SakaDream · February 20, 2018, 4:27pm

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

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>

Thuc_Nguyen_tan · February 20, 2018, 4:55pm

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

findersln96 · February 21, 2018, 6:38am

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