Set Image Src in TypeScript

Question

I'm using ionic 2 and want to load a picture during runtime. In the past projects I always did it like this:

bikeImage.src = "data:image/jpeg;base64," + bikeResult.image;

But it doesn't work in TypeScript.

My HTML looks like this.

<img id='bikeImage'/>

It says, that src is a unresolved variable.

I thought that every JavaScript code works in TypeScript as well. Am I wrong?

Does anybody have an idea how to fix this?

Thanks in advance.

Melissiamelita

Answer 1

You haven't posted how you get element into bikeImage, but it should be:

bikeImage = document.getElementById("bikeImage") as HTMLImageElement;

If you don't type assert it to HTMLImageElement then it will be just an HTMLElement which does not have the src property.

Ritaritardando

Thanks alot. I´ve never heard of that before. – Melissiamelita

Answer 2

I maybe late but I found the best and simple way. Angular 15 using latest typescript version.

Create a function inside your component. See below:

onSelectImage(image: any){
document.images[document.images.length - 1].src = image.convertedProductImage;}

Call it from your html such as (click)="onSelectImage(image)". Open dev tools and double check what index of your target element in the document images. This should swap images.

The parameter passed is the image base64:

"data:image/png;base64,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......"

Such as that example

Pridemore