Here’s the scenario:
- You’ve got images in your
app > App_Resources > iOS (or Android)folder
- They show-up fine using the “resource” syntax:
<image src="res://myimage" />
- You add a NEW image to the resources directory
- When you try to use it in your app, IT’S NOT THERE!
What happened? Is the image the wrong size? Wrong format? In the wrong place?
Assuming you’ve done all the basics correctly (PNG or JPG, any size, in the appropriate
App_Resources folder), the MOST LIKELY problem is that the image has simply not been deployed to your device or simulator.
This is the “gotcha.”
Running any of these normal NativeScript commands WILL NOT update your app package with your new image:
Because this is a new app resource, the app needs to be fully recompiled and redeployed before your new image will work. That means you need to do one of the following:
tns build(+ any other command to run/debug app)
- Delete the app on the device/simulator manually, and then rebuild/deploy
This only applies to images used as App_Resources. If you reference images from the file system (such as
<image src="~/myimage.png" />), all app updates will catch your new image. The advantage of App_Resource images, of course, is that you can deploy multiple-resolution variations (@2x, @3x) and iOS/Android will auto-use the best version.
So there you go. Next time you’re banging your head against the wall wondering why your image won’t display, stop, run one of the
tns commands above, and enjoy.
UPDATE: As Mark mentioned below, this same guidance applies to new plugins or npm packages added to your app. Before you will see the plugin/package show-up, you need to run one of the actions that does a full rebuild and deploy of your app.