Where to locate images to be used in an app

1

I have need for very small buttons, about 30 by 30… I created a .jpg image that will be used on the button. Using the Bootstrap “Image” control, which has an event called ‘on-click’, which will therefore act like a button, Ioaded the images into the same directory as the .nsx files. I then put an ‘image’ (BS) control on the form and set the SRC to C:\Users\tlclarke\Documents\nsBasic Programs\Double Left.jpg and the image came up with a ‘broken link’ (a little X in the middle of the image.)

What’s the issue?

Windows 10, NSB/AppStudio 6.2.6, all Bootstrap controls.

2

Best practice is to put all your images into a folder in your project directory called ‘images’.

You can then refer to them with the path images\DoubleLeft.jpg.

(Bonus hint - do not put spaces in file names!)

The reason what you are doing now does not work is that there is no C: drive at runtime. It’s relative to your app.

3

I believe I did what George said… Here is the result in a set of screen captures: the third one shows the ‘path’… The first one shows how I referenced it in properties of the ‘image’ and the second one shows what is presented on the app screen. The last one (a double left arrow) is the actual .jpg image referenced.

Why doesn’t it show in the ‘image’ control in the app?

Since the forum does not allow me to display more than one screen shot, I’ll post this note with 3 additional separate notes, one for each screen shot.

4

Heres’ the second…

5

and the third…

Capture3.JPG857×285 21.9 KB

6

The fourth and last one.

7

Path names are case sensitive. Use images or Images, but not both.

8

Fixed the src property to be Images\DoubleLeft.JPG and got same result of a broken link.
I could use a Button (bs) for this, with, for example " << " as the value, but it comes out too large and if I shrink the size (using height and width parameters) the text value is not centered… hmmm, I can use a label (BS) which is smaller than a button and set to white BG and no border… I think that’ll work.

9

Can you deploy your app to Volt and send me the URL? I should be able to see what is going on.

10

The path is still broken…

Here’s the path as specified in the app: Images\DoubleLeft.JPG

And here is the path in Windows (10):

Capture.JPG796×378 24.7 KB

The folder, “nsBasic Programs” contains all of my apps, both .nsx and .html. (Could the space in the folder name “nsBasic Programs” cause the broken link? And if I eliminate the space, will all the apps still load? Scary.)

11

Try locating the path using the […] button in the images property.

12

Confused… in AppStudio for the app, in Properties, there is no […] button under/in src property.

In Windows, I right click on the .JPG file, and get the path and it is:
C:\Users\tlclarke\Documents\nsBasic Programs\Images

In an earlier email, in which I documented using this path, you said the issue was that C:… etc was not valid to use in pointing to the .JPG file I needed.

I don’t know anywhere else to get […] button and/or to get a path to the .JPG file.

Tom

13

You’re right - the Bootstrap Image src property is missing that picker. I was looking the Common Image control.

We made a new build of AppStudio with this fixed. Download it and give it a try!

Thank you for bringing this to our attention!

14

New version of AppStudio has the […] and using that, rather than copying the path worked and now the image link works… Thank you!

15

Thanks for the good news!