Create an image in NativeScript from file using code

For my NS Angular projects, I often have images inside the src/images directory that I want to display in my app – for example on a Map. The docs on how to create an Image object and load its source from code (TypeScript) are pretty fuzzy. However, it is pretty straightforward (shared/utils/image.ts):

import { Image } from 'tns-core-modules/ui/image';
import { path, knownFolders } from 'tns-core-modules/file-system';
import { fromFile } from 'tns-core-modules/image-source';

export function imageFromLocal(fileNameInImagesFolder: string): Image {
    const img = new Image();
    const folder = knownFolders.currentApp();
    const folderPath: string = path.join(
        folder.path,
        `images/${fileNameInImagesFolder}`
    );
    img.imageSource = fromFile(folderPath);
    return img;
}

Using it is then super easy (map.service.ts):

...
        this.curLocationMarker = new Marker();
        this.curLocationMarker.icon = imageFromLocal(
            'btn_google_dark_normal_ios@3x.png'
        );
...

Leave a comment

search previous next tag category expand menu location phone mail time cart zoom edit close