Nativescript-Vue -- Local image path not working

Question

In my App.vue

<template>
  <Page class="page">       
        <ActionBar title="my-app" class="top-nav" />
        <ListView v-show="showHome" for="(post, index) in posts" @itemTap="onItemTap" row="1">
            <v-template>
              <FlexboxLayout flexDirection="row" class="post-list" justifyContent="space-between">
                <FlexboxLayout flexDirection="column" width="15%" justifyContent="space-between" alignItems="center">
                  <Image src="~/images/up.png" @tap="onButtonTap('up', index)" class="up-down" />
                  <Label :text="post.score" class="post-count" />
                  <Image src="~/images/down.png" @tap="onButtonTap('down', index)" class="up-down" />
              </FlexboxLayout>
            </v-template>
        </ListView>
    </Page>
</template>

It works very well on Nativescript Playground, <Image /> did show up with the src

But when I debug on machine with an iOS simulator, it's not working..., the <Image /> parts are just a blank...

The project skeleton is shown as below

/app
|_ app.js
|_ app.css
|_ package.json
|_ /components
|   |_App.vue
|
|_ /images
    |_up.png

Anyone know what's going on? Thank you.

Are you using the latest vue-cli template? That example worked here... — Tiago A.
– Tiago A., Commented Oct 4, 2018 at 9:16
Hi @TiagoA., thank you for replying! I'm not sure how to check the version of vue-cli template as you mentioned, but it's v2.9.6 for my vue-cli, are they the same? — vanngoh
– vanngoh, Commented Oct 6, 2018 at 6:05
Your comment in Jen Looper's answer tells me you are using the old project template. Follow the guide here to update to the new one: nativescript-vue.org/en/docs/getting-started/upgrade-guide — Tiago A.
– Tiago A., Commented Oct 6, 2018 at 14:32

Jen Looper · Accepted Answer · 2018-09-28 16:32:08Z

1

in a NativeScript-Vue app, the expected folder structure using our vue-cli template is to put your images in an assets folder. Can you give that a try? So put the .png files in app/assets/images.

answered Sep 28, 2018 at 16:32

Jen Looper

4283 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

vanngoh Over a year ago

Thank you so much for your help @Jen !! I've tried but still not working...And I also tried rm -rf platform before npm run watch:ios but still not working. Any idea?

Tiago A. Over a year ago

You are using the old template. Follow this guide to upgrade: nativescript-vue.org/en/docs/getting-started/upgrade-guide

Collectives™ on Stack Overflow

Nativescript-Vue -- Local image path not working

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related