WebListBoxImageRenderer URL Issue

Targets Web
1

Hopefully someone with a better understanding of images and Picture / WebPicture handling in Xojo web can help me out here.

I have a web app that has a WebListBox that has multiple columns. The first column is an image.

I use WebListBoxImageRenderer to load the image into the column and if I use an image stored in the project as the source, it works exactly as expected.

However, what I really want to do is load the image from a database, so it arrives, so to speak, as a Picture, which I convert to a WebPicture before trying to load into the WebListBox cell. That doesn’t work though. Looking at the URL of the WebPicture it is well-formed in the first project based scenario, but in the DB sourced scenario, the image filename in the URL has been changed to “picture” every time.

Here’s a copy of the code I have been using…

// Initialization
Var img As New image
Var webpictureTemp As WebPicture
Var pictureTemp As Picture
pictureTemp = img.AssignImage(“KitchenSink”) ’ Get the picture from the DB

// ****** NOT WORKING *********
PictureImageViewer.Picture = pictureTemp
webpictureTemp = pictureTemp ’ ****** NOT THE RIGHT WAY TO DO THIS? ******
Log(CurrentMethodName, webpictureTemp.URL)
pic.URL = webpictureTemp.URL ’ link to the embedded pic
ListsList.CellValueAt(1,0) = pic
// **********************************

// ********** WORKING *************
webpictureTemp = KitchenSink_64 ’ Get the picture from the Project
WebPictureImageViewer.Picture = webpictureTemp
Log(CurrentMethodName, webpictureTemp.URL)
pic.URL = webpictureTemp.URL ’ link to the embedded pic
ListsList.CellValueAt(1,0) = pic
// **********************************

In both cases, the images are valid in the Picture and WebPicture variables, as can be seen when I load them into the WebImageViewers:
Screen Shot 2021-08-07 at 9.19.03 AM

Here’s a view into what the URL’s look like from the Log statements above:
/389…2F2/files/679…420/picture.png
/389…2F2/files/729…843/KitchenSink_64.png

Can anyone explain why the picture filename is being replaced with the word “picture”? Anyone know a way around this so I can use a DB sourced image rather than having to load all of my image icons (there are many!) into the project itself.

2

Because WebPicture is a subclass of WebFile, you should be able to set the name property.

3

Remember that the name isn’t stored in the file data.

4

Thanks Greg, that makes sense. Setting the FileName property certainly resolves the URL issue, unfortunately it still doesn’t populate the WebListBoxImageRenderer with the actual image.

The WebPicture definitely contains the actual image, but the following two lines…
pic.URL = webpictureTemp.URL ’ link to the embedded pic
ListsList.CellValueAt(1,0) = pic

… are not populating the listbox cell with the actual image.

The actual URL seems to be pointing to a working directory which makes sense if it is pointing to an image in the project I guess, but can that even work if the image I have in my WebPicture was loaded from a DB?

Sorry, I must be missing something!?!?

5

Yeah, the problem is that the WebPicture from which you are getting the URL (webpictureTemp) is going out of scope and being destroyed. By the time the browser requests it, it’s no longer available. You’ll need to store those persistently somewhere, whether it be an array or a dictionary, at the very least as a property on the page or container where it’s being used or somewhere globally in a module if the images are not user specific.

6

Ahhh, that was what I was missing. Did as you suggested and it works flawlessly.

Many thanks for your help, that one was driving me nuts!