Hiding broken images and related questions

Wappler General
#1

I have a query which returns a list of products, each of which might have zero or more images. When displaying the records, I need to determine if there is at least one related image - if there is, the first image is shown; if there is no image, I want to display an empty div - so the layout remains consistent (same number of columns) and no broken/missing icon is displayed. The image displayed is using the dynamic srcset feature.

In the past I would usually use PHP to check the file system for the existence of a related image and conditionally display the relevant div. (The filenames are always record_id.jpg for the first image.) Sometimes I would use javascript (onerror) to hide the broken image.

Srcset doens’t seem to return an error if the image is missing, so I don’t think I can use that option. (It’s not a very satisfactory solution anyway.)

If the filenames are stored in an image table, I could use a left join to determine if related records exist. I could use Group By to prevent products appearing multiple times if there are multiple images for a product, but Server Connect doesn’t support this (AFAIK), so I would have to create a view (using MySQL). This might be the best solution, but there are some disadvantages in using views.

Currently, I’m using a repeat in Server Connect, using If File Exists:

image

With this method, I can show the relevant div (with or without the image), using:
dmx-hide="!sc_search.data.checkImg[$index].fileExists"

This seems a ‘Wappler’ way to do it, except the Then, Else parts of the repeat are not actually needed - so these lines are doing nothing useful - and the path used in dmx-hide condition is not available from the repeat used to display the records.

Anyway, I have a solution which seems to be working fine. However, this is probably quite a simple problem and I suspect there is a simpler solution than those I’ve tried. I’m curious about what best practises for this might be - from the point of view of simplicity and performance. I imagine it’s quite a common situation.

#2

I normally do this at app connect end either using a “no image available” image or a transparent block

In app connect, instead of the image link being ‘/images/{{myimage}}’
i would set it too an expression something like
myimage != Null?’ ‘/images/{{myimage}}’:‘images/defaultimage.png’

Sorry hope syntax connect, did it off top of my head

#3

Thanks Brian. In this case, I can’t use a dynamic image like {{image}}, because I haven’t linked the records being displayed to the images table for the reasons I mentioned (though this is certainly an option). However, I am using an expression:
sc_search.data.checkImg[$index].fileExists
… which returns true or false depending on the existence of a related image. To use this with the ternary operator, as in your example, is in principle a neater solution - avoiding having two divs and the necessary repetition of code. However, it may be clearer to use the two divs (only one of which will be rendered), given the use of srcset and slightly more involved code:

image
image.png955×174 11.2 KB

I was surprised that it was possible to get a value from ‘If File Exists’ in Server Connect, without needing any ‘then’ or ‘else’ statements - but it seems to work and is useful. I had put a dummy Set Value step in my screenshot example, after ‘then’, but in fact you can leave this blank.

I’m not sure of the best solution but at least I have a solution. I think there are still many mysteries to unravel in the workings of Wappler. It would be useful if there were a manual to explain things like:
If File Exists (“myfile.jpg”) in Wappler can be used like file_exists(“myfile.jpg”) in PHP

#4

‘If File Exists’ returns True or False so will always yield a result

#5

Yes - and it’s very useful. It’s just rather surprising that an IF statement returns anything at all.