Typescript：“HTMLElement”類型上不存在屬性“src”

Question

我從 Typescript 收到一個錯誤，我不知道如何糾正它。 “編譯”時代碼工作正常，但我無法糾正錯誤。 我已經從我的代碼中提取了涉及錯誤的部分。 我想我必須預先定義 src 但不確定如何。

編輯器中的錯誤消息和 Gulp 編譯：

“'HTMLElement'類型不存在屬性'src'。在第53行第17行”

...

element:HTMLElement; /* Defining element */

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

'''

這是我用來渲染元素 position 的方法，頂部和左側都可以正常工作而不會出現錯誤。

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

因為src不是HTMLElement類型的屬性，而是HTMLImageElement 。

如果您確定您將獲得img元素，則可能需要使用正確的子類型聲明您的變量：

element: HTMLImageElement; /* Defining element */

// ...

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

此外，您可能想要查看document.createElement返回的內容。 如果您指定"img"作為其參數，則它是完全相同的類型。

Answer 3

go 與：

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

我們可以用這兩種方法解決它..

情況1

在document.getElementById('myId')之前使用<HTMLImageElement>

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

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

案例 - 2

使用setAttribute將src設置為image ，如下所示

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

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

Answer 6

您可以在訪問任何 IMG 屬性之前將目標元素從事件轉換為 HTMLImageElement（React/Typescript 示例）：

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

Answer 7

您需要將其聲明為HTMLImageElement ，它具有src屬性。

Answer 8

像@whereDatApp.com建議的使用鑄造為我工作。 像這樣使用查詢選擇器：

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