ブラウザにローカルイメージファイルを表示する

Question

私はユーザーがローカルイメージを選択できるページを作成しようとしています。それが表示されます。私はウェブ世界には初めてのので、私はたくさんのGoogle検索を行い、基本的にいくつかの他の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

img要素に幅と高さのスタイルを与えるようにしてください。代わりにarrow function() =>を使用する必要があります。また、特定のケースではViewChildは必要ありません。

を使用して、データがあるまで画像が読み込まれないようにしてください。ソースイメージデータを含む変数にイメージソースをバインドします。宛先イメージにも同じことが起こります。

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

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

...とあなたcomponent.tsのコードは次のようになります。次へ<img>のタグを変更するだけでレコードの

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属性を取得しているかどうかを確認してください。それがあれば、適切な画像ソースが存在するかどうかをチェックする。あなたがfunctionキーワードを使用する場合、あなたはthisへのアクセスを失う