Angular 无法设置属性'；src&x27；空的角度类型脚本错误

我试图从计算机中获取图像，并试图将此图像设置为图像元素，但出现以下错误

无法将属性“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;
            }
        }
    }
}

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

这是我的HTML文件代码。

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;
            }
        }
    }
}

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

---

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

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

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

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

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

---

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

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

---

从选择器中删除

#

。应该是

document.getElementById（“图像”）

为什么还要在这里使用document.getElementById？Angular的全部要点是它为您提供了更好的工具。这一行

onSelectFile=（event）=>{

可以更改为

onSelectFile（event）{

…从选择器中删除

。应该是

document.getElementById（“image”）

为什么还要在这里使用document.getElementById？Angular的关键在于它为您提供了更好的工具。这一行

onSelectFile=（event）=>{

可以更改为

onSelectFile（event）{

。。。