Typescript：“HTMLElement”类型上不存在属性“src”

Question

I get a error from Typescript and I am not sure how to correct it. The code works fine when "compiled" but I can't correct the error. I have extracted the parts that involve the error from my code. I guess I have to predifine the src but not sure how.

Error msg in Editor and on Gulp compile:

"Property 'src' does not exist on type 'HTMLElement'.at line 53 col 17"

...

element:HTMLElement; /* Defining element */

'''
this.element = document.createElement('img'); /*creating a img*/

'''

This is the method I run to render the element, position, top and left all works with out giving a error.

display() {
   this.element.src = this.file; /*This is the line that gives the error*/
   this.element.style.position = "absolute";
   this.element.style.top = this.pointX.toString() + "px";
   this.element.style.left = this.pointY.toString() + "px";

   document.body.appendChild(this.element);
};

Answer 1

使用铸造：

(<HTMLImageElement>document.querySelector(".company_logo")).src

Answer 2

Because src is not a property of the HTMLElement type, but of HTMLImageElement .

If you are certain you'll get an img element, you might want to declare your variable with the correct subtype:

element: HTMLImageElement; /* Defining element */

// ...

this.element = document.createElement('img'); /*creating a img*/

Also, you might want to have a look at what document.createElement returns. It's the very same type if you specify "img" as its argument.

Answer 3

go with:

var myImg = document.getElementById('myId') as HTMLImageElement;
myImg.src = "imgSrc";

Answer 4

document.getElementById('img').setAttribute( 'src', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==' );

通过set属性方法设置source。

Answer 5

We can solve it with this two ways..

CASE - 1

Use <HTMLImageElement> before document.getElementById('myId')

var myImg = <HTMLInputElement>document.getElementById('myId');

myImg.src = 'https://picsum.photos/id/237/200/300';

CASE - 2

Use setAttribute to set src to the image as below

var myImg = document.getElementById('myId');

myImg.setAttribute('src', 'https://picsum.photos/id/237/200/300');

Answer 6

You can cast the target element from the event to HTMLImageElement before accessing any IMG attribute (React/Typescript example):

onError={
    (e: React.SyntheticEvent<HTMLImageElement, Event>) => (
        (e.target as HTMLImageElement).src = DEFAULT_AVATAR
    )
}

Answer 7

您需要将其声明为HTMLImageElement ，它具有src属性。

Answer 8

Using casting like @whereDatApp.com suggested worked for me. Using query selector like this:

querySelector("img[name='menubanner']")