Display array of base64 image data as images

Question

I am outputting a RadListView of items each of which has an image in base64 format and I having trouble displaying them.

In the component loop I have

let base64ImageSource = new ImageSource;
base64ImageSource = fromBase64(returned_expenses[i].receipt_data);

and in the template I have

<Image row="0" col="1" [src]="base64ImageSource" horizontalAlignment="right" width="100" height="100"  stretch="none"></Image>

and there is no image.

I have seen the following code

this.imageSource = new ImageSource();
var loadedBase64 = this.imageSource.loadFromBase64(MY_BASE_64_STRING_PREVIOUSLY_SAVED);
console.log(loadedBase64);
if (loadedBase64) {
  let photo = <Image>this.photoImage.nativeElement;
  photo.imageSource = this.imageSource;
  this.photo = photo;
}

but I do not know what to make of the line

let photo = <Image>this.photoImage.nativeElement;

ie. what photoImage is declared as?

Thank you for any guidance!

Answer 1

In your sample code photoImage could be a reference to an element, may be using ViewChild

HTML

....
<Image #photoImage></Image>
...

TS

@ViewChild("photoImage") photoImage: ElementRef;