CODEWITHSUNDEEP
imagevue.jsnativescriptnativescript-vue
Pablo Colson
Pablo Colson

Reputation: 129

Can't load images in Nativescript vue from local path, but with http/https it's OK, why?

I'm currently working on a little Nativescript vue project, I'm pretty new to this tech. I'm trying to load an Image from local path. When the src is and http link it's all good but, with local images in the assets folder nothing works. I'm running Nativescript 6.0.2 and Vue 3.9.3. I init the project following the guide on the Nativescript vue website.

I tried different things.

<Image src="../assets/images/NativeScript-Vue.png" stretch="none" col="2" row="0"/> does not work

<Image src="~/assets/images/NativeScript-Vue.png" stretch="none" col="2" row="0"/> does not work

<Image src="https://www.google.com/images/errors/logo_sm_2.png" stretch="none" col="2" row="0"/> does work

<Image :src="native_img" stretch="none" col="2" row="0"/>

data() {
            return {
                native_img: "~/assets/images/NativeScript_logo.png"
            };

does not work

<Image :src="native_img" stretch="none" col="2" row="0"/>
data() {
            return {
                native_img: "https://play.nativescript.org/dist/assets/img/NativeScript_logo.png"
            };
        }

does work

And my project folder structure is V2 project structure https://nativescript-vue.org/en/docs/getting-started/upgrade-guide/

Thank you for your time ;)

Upvotes: 1

Views: 1029

Answers (1)

Steven
Steven

Reputation: 1414

If the location of your files is like this:

- app
   - App_Resources
   - assets
     - images

Then you should access your images like this:

<Image src="~/assets/images/imageName.png" stretch="none"></Image>

Upvotes: 4

Related Questions