Html 如何使用 Typescript 和 Angular 4 显示图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47067249/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I display an image using Typescript and Angular 4
提问by Kenny Ho
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.
一般来说，我对打字稿和网络开发很陌生，所以如果我的代码很糟糕，我很抱歉。无论如何，我在显示个人资料图片上传的“预览图片”时遇到问题。我正在使用 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 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();
};
}
}And here is my HTML
这是我的 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>
回答by Vivek Doshi
You achive this by this simple function :
您可以通过这个简单的功能实现这一点：
Template :
模板 ：
<img [src]="url" height="200"> <br/>
<input type='file' (change)="onSelectFile($event)">
Component :
成分 ：
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:
这是它的工作示例，请查看：
回答by Iron shield
Template :
模板 ：
<input type='file' (change)="readUrl($event)">
<img [src]="url">
Component :
成分 ：
readUrl(event:any) {
if (event.target.files && event.target.files[0]) {
var reader = new FileReader();
reader.onload = (event:any) => {
this.url = event.target.result;
}
reader.readAsDataURL(event.target.files[0]);
}
}
T tried it, and it works without any error.
T 试过了，它没有任何错误。
