Nativescript: Why i cant get imageSource from image tag

Created on 24 May 2018  路  3Comments  路  Source: NativeScript/NativeScript

What is wrong here? Why i cant get imageSource from image tag?

<image  id="img" src="myimage.jpg" @loaded="ImageLoaded"></image>

function ImageLoaded(args){
        console.log(args.object.imageSource) // undefined
        console.log(args.imageSource) //undefined
}

Most helpful comment

Hi @xeroxstar,
When you are setting up the source of the image via src property and needs to get the image source, you should use the fromFileOrResource method provided by ImageSource module. For example:
XML

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">

    <Page.actionBar>
        <ActionBar title="My App" icon="" class="action-bar">
        </ActionBar>
    </Page.actionBar>
    <StackLayout class="p-20">
        <Label text="Tap the button" class="h1 text-center"/>
        <Image loaded="imgLoaded" src="~/logo.png" stretch="none" />

    </StackLayout>
</Page>

TypeScript

import { EventData } from 'data/observable';
import { Page } from 'ui/page';
import {Image} from "ui/image";
import {fromAsset, fromResource, fromFileOrResource} from "image-source"
// Event handler for Page "navigatingTo" event attached in main-page.xml
export function navigatingTo(args: EventData) {

    let page = <Page>args.object;

}

export function imgLoaded(args){
    console.log("image loaded");
    let image:Image = args.object;
    console.log(image.src);
    var imageSource = fromFileOrResource(image.src);
    console.log(imageSource);
}

For further questions, please use our forum or StackOverflow thread.

All 3 comments

Hi @xeroxstar,
When you are setting up the source of the image via src property and needs to get the image source, you should use the fromFileOrResource method provided by ImageSource module. For example:
XML

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">

    <Page.actionBar>
        <ActionBar title="My App" icon="" class="action-bar">
        </ActionBar>
    </Page.actionBar>
    <StackLayout class="p-20">
        <Label text="Tap the button" class="h1 text-center"/>
        <Image loaded="imgLoaded" src="~/logo.png" stretch="none" />

    </StackLayout>
</Page>

TypeScript

import { EventData } from 'data/observable';
import { Page } from 'ui/page';
import {Image} from "ui/image";
import {fromAsset, fromResource, fromFileOrResource} from "image-source"
// Event handler for Page "navigatingTo" event attached in main-page.xml
export function navigatingTo(args: EventData) {

    let page = <Page>args.object;

}

export function imgLoaded(args){
    console.log("image loaded");
    let image:Image = args.object;
    console.log(image.src);
    var imageSource = fromFileOrResource(image.src);
    console.log(imageSource);
}

For further questions, please use our forum or StackOverflow thread.

@tsonevn thanks for your answer! 馃憤

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Was this page helpful?
0 / 5 - 0 ratings