如何使用Typescript和Angular 4显示图像 [英] How can I display an image using Typescript and Angular 4

问题描述

总体而言，我对打字稿和Web开发非常陌生，因此对我的代码很糟糕感到抱歉.无论如何，我在显示个人资料图片上传的预览图片"时遇到了问题.我正在使用ng2-file-upload将我的图片上传到服务器，并且该部分正常工作.在单击上载按钮之前，我想在选定图像后立即在页面上显示选定图像.当前，我正在尝试通过从HTMLImageElement检索src属性来显示图像，但是src属性似乎为空.

I am very new to typescript and web development in general so I am sorry if my code is terrible. Anyways, I am having an issue displaying a "preview image" for a profile picture upload. I am using ng2-file-upload to upload my image to the server and that part is working correctly. Before I click the upload button I want to display the selected image on the page right after it has been selected. Currently I am trying to display the image by retrieving the src property from the HTMLImageElement but the src property appears to be empty.

import { Component, OnInit } from '@angular/core';
import {  FileUploader } from 'ng2-file-upload/ng2-file-upload';

const URL = 'http://localhost:4200/api/upload';

@Component({
  selector: 'app-view-profile',
  templateUrl: './view-profile.component.html',
  styleUrls: ['./view-profile.component.css']
})
export class ViewProfileComponent implements OnInit {

  constructor() { }
  public uploader: FileUploader = new FileUploader({url: URL, itemAlias: 'newProfilePicture'});
  title: string;
  previewImage: any;
  tempImage: any;
  source: string;

  imagePreview(input) 
  {
      document.getElementById("previewImage").style.display="block";
      
        console.log("Image is selected")
        this.previewImage = document.getElementById("previewImage");
        console.log(this.previewImage);
        
        this.source = (<HTMLImageElement>document.getElementById('previewImage')).src
        console.log("Image Source: " + this.source + " Should be inbetween here");
        
      
      //var reader = new FileReader();
        
        //console.log(this.previewImage);
      
  }

  ngOnInit() {
  	this.title = 'View or Update Your Profile';
  	this.uploader.onAfterAddingFile = (file)=> {file.withCredentials = false;};
  	this.uploader.onCompleteItem = (item:any, response:any, status:any, headers:any) => {
        console.log("ImageUpload:uploaded:", item, status, response);
    //this.imagePreview();


    };
  }


}

这是我的HTML

<div class="container">
    <h1>{{title}}</h1>

    <div>

        <input type="file" id="previewImage" (change)="imagePreview(this);" name="newProfilePicture" ng2FileSelect [uploader] ="uploader" />
        <button type="button" class="btn btn-success btn-s" (click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length">
          Upload Your File
        </button>
    </div>
</div>

推荐答案

您可以通过以下简单功能来实现:

You achive this by this simple function :

模板:

<img [src]="url" height="200"> <br/>
<input type='file' (change)="onSelectFile($event)">

组件:

onSelectFile(event) { // called each time file input changes
    if (event.target.files && event.target.files[0]) {
      var reader = new FileReader();

      reader.readAsDataURL(event.target.files[0]); // read file as data url

      reader.onload = (event) => { // called once readAsDataURL is completed
        this.url = event.target.result;
      }
    }
}

这是它的有效示例，请查看以下内容:

Here is the working example of it, please check this out:

工作演示

WORKING DEMO

这篇关于如何使用Typescript和Angular 4显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！