在浏览器中显示本地图像文件

Question

我正在尝试构建一个允许用户选择本地图像的页面。然后应该显示它。我是网络世界的新手，所以我搜索了很多，基本上复制了一些其他 StackOverflow 帖子。它应该工作。但事实并非如此。我可以看到正在加载的文件，正在将图像数据写入元素，但元素没有改变。它只是保持白色，并显示替代文本。

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);
  }
}

选择文件后的结果

（右边的调试输出，所有方法调用，只是图片还是空的，显示的是替代文字。）

那么……我做错了什么？

Answer 1

当您使用function 关键字时，您将失去对this 的访问权限。您需要改用 arrow function () =>。此外，在您的特定情况下，您不需要 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);
  }
}

Answer 2

检查您是否在 DOM 中获得 SRC 属性。如果存在，请检查是否存在正确的图像源。尝试为 img 元素赋予宽度和高度样式