Aurelia :보기에서 비동기 요청을 처리하는 방법?

Question

은 내가 FileContentResult를 반환하는 DOTNET 코어 API를 .. 우체부 통해

return new FileContentResult(bytes, contentType) 
{ 
    FileDownloadName = Path.GetFileName(request.Filename) 
}; 

내가 완벽하게 정상적으로 이미지를 읽을 수 있습니다. 이제는 aurelia 가져 오기 클라이언트를 통해 이미지를 읽고 HTML보기로 표시하려고합니다. 이것은 내 API에서 이미지를 검색하는 기능입니다.

public image(filename: string) { 
    return this.http.fetch(AppConfiguration.base_url + 'assets/image', 
     { 
      method: 'post', 
      body: json({ 
       filename: filename 
      }) 
     }); 
} 

이 값 변환기를 사용하여 응답에서 얼룩을 변환하려고 시도했습니다. 그러나 나는 그

컨버터를 동작하지 않습니다 :

export class BlobToUrlValueConverter { 
    public toView(blob) { 
     return URL.createObjectURL(blob); 
    } 
} 

뷰 모델을 :

export class Dashboard { 

    public blob: any; 

    constructor(
     public assets_service: AssetsService 
    ) { } 

    async attached() { 
     let response = await this.assets_service.image('test.png'); 
     this.blob = response.blob(); 
    } 
} 

보기

<div if.bind="blob"> 
    ${ blob | blobToUrl } 
</div> 

나는 이것이 올바른 방법입니다 확실하지 않다. 또한 비동기 요청 부분을 처리하는 방법도 확실하지 않습니다. html보기에 표시 할 이미지 응답을 얻는 가장 좋은 방법은 무엇입니까? img 태그를 통해 말할 수 있습니까?

Answer 1

내가 가까이서. 다음은 내가 보여줄 이미지를 얻는 방법입니다.

뷰 모델 :

export class Dashboard { 

    public url: string; 

    constructor(
     public assets_service: AssetsService 
    ) { } 

    async attached() { 
     let blob = await this.assets_service.image('test.png') 
      .then(response => response.blob()); 
     this.url = URL.createObjectURL(blob); 
    } 
} 

보기 :

<div if.bind="url"> 
    <img src.bind="url"> 
</div> 

편집 : 전화를하지

보낸 기능 :

위에 기록 된 부품을 사용하여 더 나은 솔루션을 찾을 수 (두 TS 모두 재사용 가능) 및 HTML 측) 함수

import { image_request } from './AssetsRequests'; 

export class ImageRequestValueConverter { 
    public toView(filename: string) { 
     return image_request(filename); 
    } 
} 

상기 용액의 중요하고 가장 놀라운 부분을 사용

export function image_request(filename: string): Promise<Response> { 
    let http = new Http(); 
    return http.fetch(<your-url-that-fetches-the-image>, 
     { 
      method: 'post', 
      body: json({ 
       filename: filename 
      }) 
     }); 
} 

값 변환. 도중에 나를 데려 오기위한 많은 감사 http://www.sobell.net/aurelia-async-bindings/ . 바인딩 동작을 재정의 할 수 있습니다. 이 재정의를 사용하여 값 변환기와 함께보기에서 비동기 약속을 처리 할 수 ​​있습니다.

export class AsyncImageBindingBehavior { 

    public bind(binding, source): void { 
     binding.originalupdateTarget = binding.updateTarget; 
     binding.updateTarget = (target) => { 
      // When we have a promise 
      if (typeof target.then === 'function') { 
      // Set temp value to loading so we know its loading 
      binding.originalupdateTarget('Loading...'); 
      // Process the promise 
      target 
       .then(response => response.blob()) 
       .then(blob => binding.originalupdateTarget(
        URL.createObjectURL(blob) 
       )); 
      } 
      else { 
       binding.originalupdateTarget(target); 
      } 
     }; 
    } 

    unbind(binding) { 
     binding.updateTarget = binding.originalupdateTarget; 
     binding.originalupdateTarget = null; 
    } 
} 

마지막으로보기는 매우 간단합니다

<img src="${ 'test.png' | imageRequest & asyncImage }">