Nativescript-angular: Image don't support imageSource;

[anhoev]

I tried the code:
<Image [imageSource]="imageSource" width="100" height="100"></Image>
but this don't work . Need support.

[leocaseiro]

Hi @anhoev,

Try:

<Image [src]="imageSource" width="100" height="100"></Image>

[nsndeck]

@anhoev imageSource property requires NativeScript imageSource object. Getting such object is different for each different type of source (Url, local file, resource and etc.) So as @leocaseiro suggested using src property is the best option (since it handles all image-source cases) and it easier to change image-source.
@anhoev I've tested your scenario and if you return a real NativeScript imagesource object everything work like a charm. I mean that many of image-source module methods return promises, since decoding bitmap could be very long operation. Very common mistake could be:

model.imageSource = imageSource.fromUrl("https://....");

However this results with an error that object cannot be decoded as bitmap. The right code should look like:

imageSource.fromUrl("https://....").then((res) => {
    model.imageSource = res;
});

[anhoev]

ImageSource.fromNativeSource(bitmap).then(imageSource => this.imageSource = imageSource)
I tested it but it doesn't work .
Error:
ImageSource.fromNativeSource(...).then is not a function.
ViewChild works ok for the case, but i think better when it directly supports imageSource.

<Image #fingerImage width="250" height="250"></Image>
@ViewChild("fingerImage") fingerImageRef: ElementRef;
let fingerImage = <Image>this.fingerImageRef.nativeElement;
fingerImage.imageSource = ImageSource.fromNativeSource(bitmap);

src doesn't support bitmap.

[nsndeck]

@anhoev This is a very strange problem. I've just tested with a imageSource.fromFile which generally do almost the same that fromNativeSource method do. Could you please send me a small project that I can debug on my side? Thank you in advance.

[leocaseiro]

Hi guys, I'm not sure if will help you, but everytime you want to use any JS NativeScript, you must include inside your ngAfterViewInit

Eq:

@Component({
        // ... 
})
export class MyComponent {
    @ViewChild("fingerImage") fingerImageRef: ElementRef;

    ngAfterViewInit() {
        let fingerImage = <Image>this.fingerImageRef.nativeElement;
        fingerImage.imageSource = ImageSource.fromNativeSource(bitmap);
    }
}

[anhoev]

@leocaseiro thank you , i know the way work , but that is not angular style.
@nsndeck i can create later a small project, i read the source map from Imagesource and find out , that fromNativeSource return direct a Imagesource.

[vakrilov]

@anhoev: Any progress on this?
One idea - you can try to use the async pipe when binding and bind directly to the promise returned by the ImageSource API.

[vakrilov]

Closing due to inactivity.
Reopen if needed.

[rossbg]

Yes, you saved my day guys!

[jonathanhendra]

How to binding data with 2 parameter?

`@Component({
// ...
})

export class MyComponent {
private imageUrl:string = 'https://location/image/';
imagescr:string = 'default.jpg';
}`

and i want binding image like this
<Image src='https://location/image/default.jpg'></Image>
while i have 2 parameter.
thanks before