How do I check if an image returns "Status Code: 404 Not Found"

Wappler General Need Help
1

I have a dynamic img and I want to check if it exists. If it doesn’t then put a default blank image, if it does exist then put the image itself.

If it doesn’t exist it will show a 'Status Code: 404 Not Found' so how can I simply check for that?

Or is there a better way?

Here is a simplified version of my img tag with a ternary operator.

<img dmx-bind:src="'repository/reports/15/image1.png' == 'Status Code: 404 Not Found' ? 'blank_img.png' : 'repository/reports/15/image1.png'" >
2

Hi,

See the second point here. A JS solution, but a simple one.
https://blog.imagekit.io/how-to-handle-loading-images-that-may-not-exist-on-your-website-92e6c3c6ea63

3

Another method is to use ‘If File Exists’ in server connect. Here, after performing the query, I use a repeat to check if there is a corresponding image for each record.

image

I don’t actually want to do anything based on the result, so I add a dummy step (there may be a better way to do this). I just want the result:

image

… to use in App Connect to control what’s displayed:

image

1 Like
4

Hi Sid, simple solution, thanks.
It would be nice if there was a Wappler onerror :smile:

5

As @TomD explained in his post, there is already a way to check if the file exists or not in Wappler.

6

I understand that Teodor but in this case there is no image information in a database.

I know I said dynamic at the beginning of the post, the dynamic part is to do with the path like this

repository/{{report_type}}/{{report_number}}/overview.png
and
repository/{{report_type}}/{{report_number}}/signature.png

where each '/report_type/report_number/' should have an 'overview.png' and 'signature.png' uploaded for the final report.

In your view should I still be going down the Server Connect route to do a 'If File Exists'?
And do this even if there are 20 or so different images to be checked for on each report?

7

There is no need to have any image information in the database, as long as you can determine the file names dynamically.

1 Like
8

Hi Tom, sorry to ask but can you help with the steps I need to follow in my use case? A bit like you have already shown in your example above.

9

My case may be simpler. I just need to find if there is a related image which I know will be named {{id}}.jpg. If there is, I know additional images will be named {{id_2}} .jpg, {{id_3}}.jpg.

It might make things easier if the filenames were in a database. If the files are not stored in a database when they’re uploaded, you can populate a database table with filenames etc quite quickly. I have an example with about 12k images and it only takes 4-5 second to store the filenames, size and dimensions.