无法设置属性'src'的null Angular - Typescript错误

Question

我试图从计算机获取图像，并尝试将此图像设置为图像元素，但我得到以下错误。

无法将属性'src'设置为null

有人可以帮忙吗？

这是我的组件文件代码。

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    title = 'app';
    event: any;
    url: any;
    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: any) => {
                this.url = event.result;
                console.log(this.url);
                var image = document.getElementById("#image") as HTMLImageElement;
                image.src = this.url;
            }
        }
    }
}

这是我的HTML文件代码。

<img id="image"  height="200"> <br/>    
<input type='file' (change)="onSelectFile($event)">

每当我设置我的图像元素的值时，我都会得到上面提到的错误。

Answer 1

将图像的src属性数据绑定到url属性：

<img id="image" height="200" [src]="url">

将图像链接分配给url属性后删除所有代码。

export class AppComponent {
    title = 'app';
    event: any;
    url = '';

    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: any) => {
                this.url = event.result;
            }
        }
    }
}

Answer 2

我认为id是“image”，没有“＃”，因为你使用的是getElementById方法。