小编Ken*_* Ho的帖子

如何使用Typescript和Angular 4显示图像

我对打字稿和网页开发很新,所以如果我的代码很糟糕,我很抱歉.无论如何,我在显示配置文件图片上传的"预览图像"时遇到问题.我正在使用ng2-file-upload将我的图像上传到服务器,该部分工作正常.在我点击上传按钮之前,我想在选择后立即在页面上显示所选图像.目前我试图通过从HTMLImageElement检索src属性来显示图像,但src属性似乎是空的.

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 …
Run Code Online (Sandbox Code Playgroud)

html5 typescript angular

8
推荐指数
2
解决办法
3万
查看次数

标签 统计

angular ×1

html5 ×1

typescript ×1