问题描述: 在Angular中,当(change)事件触发时,图片预览不显示。
解决方法:
imageUrl: string;
onFileSelected(event: any) {
const file: File = event.target.files[0]; // 获取选中的文件
const reader = new FileReader();
reader.onload = (e: any) => {
this.imageUrl = e.target.result; // 将图片的预览URL赋值给imageUrl变量
};
reader.readAsDataURL(file); // 以DataURL格式读取图片
event.target.value = null; // 重置文件输入框的值,以便下次选择同一张图片时也能触发(change)事件
}
img {
max-width: 100%;
max-height: 100%;
}
通过以上步骤,当用户选择图片后,(change)事件会触发onFileSelected()方法。该方法会读取选中的图片文件,并将图片的预览URL赋值给imageUrl变量。最后,预览容器中的图片会根据预览URL显示出来。