How to check existence to a file/an image in a function?

MrEugene

Hello,

Writing some code to add a background image to a div dynamically based on tag, but I want to check/verify the existence of the file before adding the div (to avoir Failed to load resource: xxx if the background image doesn't exists)

So I have that for now:

<div className="Hero--bi" style={'background-image: url(../assets/hero/' + this.attrs.tags + '.jpg'}>{this.attrs.tags}</div>

I wish check if url(../assets/hero/' + this.attrs.tags + '.jpg') exists and div (or not).

But I have no idea how to do it 😋 if someone can give me an advice…

Thanks everyone!

clarkwinkelmann

MrEugene you probably don't want to dynamically check if the file exists any time the page is rendered client-side as that would almost double the number of requests required.

The most efficient solution is probably to add a new attribute to the tag resource, either a boolean that says "has image: yes/no", or a string that contains the full image URL. Then make that value available to the frontend through the serializer extender, and optionally add an input field to edit this value in the admin panel if you don't want to fill it by editing the database directly.

If you want to avoid having to make any server-side change you could probably exploit other existing attributes to add that image flag, for example add an additional token that isn't a FontAwesome icon at the end of the icon value, then look for that token with tag.icon().contains('myimagetoken')

MrEugene

clarkwinkelmann Thanks for your ideas, haven't seen the double requests thing!

clarkwinkelmann

MrEugene I'm not sure the word "double" was well chosen but basically there would be 2 ways to dynamically test if a file exists:

Try loading every image and react to any error via the onerror javascript callback
Perform an API request to the server to ask if a specific file exists.

If we assume 50% of tags have an image, the first solution would result in N*2 requests since you would makes twice as many requests as really needed.

The second solution would result in N*3 requests since you would perform an API request for each image, and then load each valid one through a separate request. Or, in situations where many tags are displayed on the same page, it could only be N+1 if you make a single request to ask for all the images at once.

Since it's only images and doesn't involve PHP at all, the first solution might not be a performance nightmare (call every image and react to 404 errors). But that really doesn't look very clean if you can know and store in advance which tags have a picture.