Stop looking for an image if it's not in the database (lots of 404 errors)

Wappler General Need Help
1

I’m about to go live with a new Wappler-built site but have hit a problem.

The database stores filenames of images. The search page shows all the records and the related images. I have put in a ‘Show’ Dynamic Attribute to only show the image if the filename is in the database. Visually this works fine. However, in the dev console I’m seeing loads of 404 errors.

It gets more serious because lots of 404s are triggering the server rate limiting to protect it against brute force attackers or vulnerability scanners so, as a result, I’m getting 429 errors fairly frequently as the server is forcing a short break.

How can I prevent the images from even being attempted if there isn’t a value in the database? The console shows it attempting to download /images/recordid/ whereas a record with an image stored would download /images/recordid/image.jpg.

I hope that makes sense. I thought that putting in a ‘Show’ attribute would sort this.

Help!

2

Could a new Flow be the way to go? Check for value in database, if there is then use the filename found, if there isn’t then use a static one like no-image.jpg.

Thoughts?

3

How about a ternary on a dynamic src?

<img dmx-bind:src="query1.data.image_path ? query1.data.image_path : ''">
4

Actually, would I be better putting something in the query to return a static image filename instead of the dynamic one if there isn’t one there? This way there’s always an image being returned.

5

Thanks Ken.

I haven’t used ternaries before. Can you explain a little how they work?

6

condition ? exprIfTrue : exprIfFalse

Basically if condition is true do this, otherwise, do that

7

Will it be more complicated if I say I have the path hard-coded in?

I have this:
dmx-bind:src="'/accommodation-images/'+AccommodationID+'/'+accomImage" dmx-show="accomImage"

8

Try this

dmx-bind:src="AccommodationID ? '/accommodation-images/' + AccommodationID + '/' + accomImage : ''" dmx-show="accomImage"
2 Likes
9

Trying it now :slight_smile:

That makes sense.

10

Shouldn’t it be this?

dmx-bind:src="accomImage ? '/accommodation-images/' + AccommodationID + '/' + accomImage : ''" dmx-show="accomImage"

AccommodationID will always have a value.

11

Use whatever works…I don’t know what each of these represent. :slight_smile:

1 Like
12

It works!

You are a diamond. :slight_smile:

Huge thanks.

2 Likes
13

Lol, I had exactly that issue yesterday big pages were firing off two many 404 errors and the server security was seeing it as a possible DOS attack and returning a 429 too many requests error. I used a default image like this.

{{ImageName != Null ? 'Imagefolder/'+ ID + '/' + imageName : 'path/to/placeholder.png'}}
3 Likes
14

Thanks Brian. Yes, I was considering showing a default image if there isn’t one in the database but it wouldn’t look good on the page, much better to have no image at all. Your solution is the same concept and very good.

Interesting you had exactly the same scenario at the same time as me!

15

I use a single pixel transparent .png

1 Like