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'
);
...