Как получить изображение и показать на моей странице угловой 6 - PullRequest
Новая
       15

Как получить изображение и показать на моей странице угловой 6

0 голосов
/ 08 марта 2019

Я сохраняю изображение из загрузчика в базу данных, поэтому оно отлично работает для меня, но вопрос в том, хочу ли я показать это изображение на своем веб-сайте, как мне их показать, а также путь к изображению должен быть показан как src="http://www.example.com/image.png". Пожалуйста, дайте мне любой пример / решение для этого.

TS 

imageUrl: string = "/assets/img/default-image.png";
  fileToUpload: File = null;
  constructor(private imageService: ImageUploadService) { }

  handleInputFile(file: FileList){
    this.fileToUpload = file.item(0);
    var reader = new FileReader();
    reader.onload = (event:any) => {
      this.imageUrl = event.target.result;
    }
    reader.readAsDataURL(this.fileToUpload);
  }

  OnSubmit(Caption,Image){
    this.imageService.postFile(Caption.value, this.fileToUpload).subscribe(
      data => {
        console.log("Done");
        Caption.value = "";
        Image.value = "";
      }
    );
  }

Service.Ts 

postFile(caption: string, fileToUpload: File){
    const endpoint = 'http://localhost:3343/api/UploadImage';
    const formData: FormData = new FormData();
    formData.append("Image", fileToUpload, fileToUpload.name);
    formData.append("Caption", caption);
    return this.http.post(endpoint,formData);
  }

HTML 

<form #imageForm="ngForm" (ngSubmit)="OnSubmit(Caption,Image)">
        <div class="input-field col s12">
          <input type="text" #Caption ngModel name="Caption" id="Caption">
          <label for="Caption">Caption</label>
        </div>
        <img [src]="imageUrl" style="width:200px;height:200px;">
        <input type="file" #Image accept="Image/*" (change)="handleInputFile($event.target.files)">
        <button class="btn waves-effect waves-light" type="submit">Submit
          <i class="material-icons right">send</i>
        </button>
      </form>

Ответы [ 2 ]

0 голосов
/ 08 марта 2019

Это способ, которым я использовал для чтения изображения из базы данных.

Создать метод в сервисе для получения изображения из БД 

getImage(path: string){
        return  this.http.get('/api/image?name=' + encodeURIComponent(path));
}

Использование сервиса в компоненте Добавьте private sanitizer: DomSanitizer к компоненту конструктора 

 this.imageService.getImage(this.path).
                subscribe((data: any) => {

                            let objectURL = 'data:image/png;base64,' + data.Image;
             this.image = this.sanitizer.bypassSecurityTrustUrl(objectURL);

            }, (err) => {
                console.log('HttpErrorResponse error occured.');
            });

Показать в файле HTML 

<img id="myimage" [src]='image' >

Обновление: Я создал демонстрационное изображение из формата base64, которое хранится в файле json. https://stackblitz.com/edit/display-image-from-api

0 голосов
/ 08 марта 2019

Я делюсь своим кодом из моего проекта. В этом примере

У меня есть API, который вызывает его с customerNumber, который возвращает мне данные типа blob. И я возвращаю эти данные своему компоненту из сервиса. Со стороны компонентов я беру эти данные как BLOB-объекты и преобразую их в тип Image с помощью функции this.createImageFromBlob. И наконец, я показываю это изображение на стороне шаблона, используя переменную imageToShow.photo в теге <img [src]="imageToShow.photo">.

My service.ts side, 

  getCustomerImages(customerNumber: number, type: string): Observable<File> {
    let result: Observable<any> = this.http
      .get(`${this.apiBaseUrl}csbins/Customer/${customerNumber}/images`, { responseType: "blob" });
    return result;
  }

Моя сторона component.ts, 

  getCustomerImages() {
    this.isImageLoading = true;
    this.getCustomerImagesSubscription = this.getCustomerService.getCustomerImages(this.refNo).subscribe(
      data => {
        this.createImageFromBlob(data);
        this.isImageLoading = false;
      },
      error => {
        this.isImageLoading = false;
      });
  }

и конвертируйте blob в изображение здесь, в вашем компоненте, 

  createImageFromBlob(image: Blob) {
    let reader = new FileReader();
    reader.addEventListener("load",
      () => {
          this.imageToShow.photo = reader.result;
      },
      false);

    if (image) {
      if (image.type !== "application/pdf")
        reader.readAsDataURL(image);
    }
  }

и моя сторона template.html, 

          <ng-template [ngIf]="imageTypeShow">
              <ng-template [ngIf]="imageToShow.photo">
                  <img [src]="imageToShow.photo" class="img-thumbnail" *ngIf="!isImageLoading;">
              </ng-template>
          </ng-template>

Не стесняйтесь спрашивать, не понимаете ли вы какой-либо смысл.

...