Отображение локального файла изображения в браузере

Я пытаюсь создать страницу, которая позволяет пользователю выбрать локальное изображение. Затем он должен отображаться. Я новичок в мире Интернета, поэтому я много гуглил и в основном скопировал несколько других постов Stackru. Это должно работать. Но это не так. Я вижу загружаемый файл, данные изображения записываются в элемент, но элемент не изменяется. Он остается белым с отображением альтернативного текста.

app.component.html:

<div style="text-align:center">
  <h1>Sprite Sheet Converter</h1>
</div>

<div class="container">
  <form>
    <div class="row">
      <label class="control-label" for="sourceFileControl">Source:</label>
      <input class="form-control" type="file" class="form-control" id="sourceFileControl" name="sourceFileControl" (change)="load($event)" />
    </div>

    <div class="row">
      <img #sourceImage src="" alt="Source" width="100" height="100"/>
    </div>

  </form>

  <img #destinationImage alt="Destination"/>
</div>

app.component.ts:

import {Component, ViewChild} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @ViewChild('sourceImage') sourceImage: HTMLImageElement;
  @ViewChild('destinationImage') destinationImage: HTMLImageElement;

  load(event: EventTarget): void {
    const eventObj: MSInputMethodContext = <MSInputMethodContext> event;
    const target: HTMLInputElement = <HTMLInputElement> eventObj.target;
    const files: FileList = target.files;
    const file = files[0];
    console.log(file);

    const reader  = new FileReader();
    const img = this.sourceImage;

    reader.onloadend = function() {
      img.src = reader.result;
      console.log('done loading');
      console.log(img);
    };

    console.log('now loading');
    reader.readAsDataURL(file);
  }
}

Результат после выбора файла

(Отладка вывода справа, все методы вызваны, только картинка все еще пуста и показывает ее альтернативный текст.)

Итак... что я делаю не так?

Источник

2 ответа

Решение

Когда вы используете function ключевое слово, вы теряете доступ к this, Вам нужно использовать функцию стрелки () => вместо. Кроме того, вам не нужно ViewChild в вашем конкретном случае. Я бы изменил ваш код на следующий, чтобы работать:

Используйте *ngIf, чтобы убедиться, что изображение не загружается, пока в нем нет данных. Свяжите источник изображения с некоторой переменной, которая будет содержать данные исходного изображения. То же самое касается изображения назначения. Изменить <img> теги к следующему:

<img *ngIf="sourceImage" src={{sourceImage}} alt="Source" width="100" height="100"/>

<img *ngIf="destinationImage" src={{destinationImage}} alt="Destination"/>

... и ваш код component.ts будет выглядеть так:

import {Component} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  sourceImage: string;
  destinationImage: string;

  load(event: EventTarget): void {
    const eventObj: MSInputMethodContext = <MSInputMethodContext> event;
    const target: HTMLInputElement = <HTMLInputElement> eventObj.target;
    const files: FileList = target.files;
    const file = files[0];
    console.log(file);    
    const reader  = new FileReader();    
    reader.onloadend = () => {
      console.log('done loading');
      this.sourceImage = reader.result;

    };

    console.log('now loading');
    reader.readAsDataURL(file);
  }
}
Источник

Проверьте, получаете ли вы атрибут SRC для DOM. Если это так, проверьте наличие источника изображения. Попробуйте задать стили ширины и высоты для элемента img

Источник
Другие вопросы по тегам