Images are not loading in tns preview app

[lokeshkandala-zz]

images are getting loaded when i use tns run but when i use tns preview i am getting " Missing Image with resourceID: res://"

[Fatme]

@lokeshkandala,

Preview app has a limitation and does not support custom images. You can use only the images/resources included in preview app itself.

[lokeshkandala-zz]

will it be solved in future releases?

[Fatme]

No. The preview app does not build your application but actually a full native rebuild is needed in order to use images with res://.

But I can suggest you to try something (not sure if this will work). You need to add your images in app folder instead of App_Resources and need to use <Image src="~/history.png" /> instead of <Image src="res://history.png" />

NOTE: The best approach for your case is to use tns run command

[lokeshkandala-zz]

@Fatme thanks for the quick reply. it seems there is no use of tns preview command in large scale applications where thirdparty plugins(e.g pager,checkbox) are used(need to place those modules in root folder and path changes are required to access the related modules). It would be more helpful if full native rebuild happens

[Fatme]

@lokeshkandala,

Thank you for your feedback! We really appreciate it!

A surprising number of people get tripped up going through the environment setup guide - https://docs.nativescript.org/start/quick-setup. They are not able to setup their environment (Android Studio, Xcode, Provisions and Certificates, etc) and never see their applications on device. We want our users to enjoy {N} without any local setup, so we introduced preview command.

{N} Preview app is a testing utility for {N}-based mobile applications. It acts as a container app. This way you can run your app on device without building an application package and installing it on the device. Only your project’s files are transferred to the preview app through the PubNub. This way any changes made to your project are automatically synchronized with the deployed app. We are not able to execute native rebuild of your project as we don’t require to have configured local environment and have installed various obligatory SDKs and tolls. From the other side, we’re not able to deploy already built application package in Preview app. If we have already built application package, it should just be installed on your device and no need from container app (Preview app).

We’re working on an article describing the purpose and all limitations of the preview command, where you’ll find the full information.

Meanwhile, we would like to understand more about your case and why you would like to use tns preview instead of tns run command. This will help us to improve our workflow and deliver great experience to our users.

[Simon-Tang]

Following the instructions at CLI Basics I forgot that there was an additional section after the section on using tns preview, and I had falsely assumed that tns preview was meant for general development;.

Without knowing about tns run, I thought that tns build was the only extra step I would need to make custom assets work.

this.$logger.warn(`Unable to apply changes from ${APP_RESOURCES_FOLDER_NAME} folder. You need to build your application in order to make changes in ${APP_RESOURCES_FOLDER_NAME} folder.`)

Perhaps this message should instead notify the user that that tns preview is the incorrect command altogether, so future newcomers can also be reminded of this.

[evedes]

Hey everyone! I'm one more for the row of Peepz who wanted to see the resources on his own device 😄. I think it's much better to use tns run for dev purposes but from times to times it's good to use tns preview to see your app running on a real device and touch it a bit.

I didn't see any warning message about this limitation so I think it would be useful to have it somewhere where it's visible to the devs. Lucky to find this Issue ❤️ Thanks