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

Question

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

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

select读取文件后的结果

（右边的调试输出，调用了所有方法，只是图片仍然是空的，显示它的替代文本。）

所以...我做错了什么？

Answer 1

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

Answer 2

当您使用 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);
  }
}

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

Showing a local image file in browser

html

image

filereader

typescript

angular