Question

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

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

有人可以帮忙吗？

这是我的组件文件代码。

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方法。

无法将属性'src'设置为null Angular-打字稿错误

2 个答案: