Is any component on app connect to check if image exist ?? and avoid 404 missing files errors?
Check out the file management actions:
but this is on backend how to apply this to the front end?
set a condition that checks if the file exists, then output a true or false, or 1 or 0 if it exists or not. You can then access that in the front end.
Hey Tom, do you know if this compares the hash of the files ?
@franse I don’t think it does, it compares filepath and filename.
You could use the onerror event to set a default
<img id="imgProd1" src="someimage.gif"
onerror="this.onerror=null; this.src='ImageurlORAnyImageHere.jpg';" />
The onerror is plain JS so you could use dmx.parse to change a value that hides/shows the element
2 Likes
What do you want to check exactly?
I have a CMS that allow to upload pictures for the clients.
The problem is that sometimes the images are not uploaded (Maybe internet loss, I dont get whats happening) but the database insert is created so I have some name storaged on database but not files related saved on the server.
I am thinking to modify the backend to create a validation that before save on database the name, check if file exist on server.
But now I want to check if the image exist prior to display on the layout.
If i correctly understand what you need, then this is the solution.
I’m attempting to incorporate this as well, but define the image via dynamic metadata. Instead of a static placeholder image, I’m trying to set it based on different scenarios. Getting it to work through a dmx variable would be sufficient, but I can’t seem to figure out how to dynamically set within the onerror attribute. Like this:
<dmx-value id="var_default_image_placeholder" dmx-bind:value="'/assets/img/Portrait_Placeholder.png'"></dmx-value>
<img src="does_not_exist" onerror="this.onerror=null;this.src=???">
I tried using <img src="does_not_exist" onerror="this.onerror=null;this.src=dmx.app.data.var_default_image_placeholder.value;">
But did not work. Any suggestions greatly appreciated! I have a feeling this is simple.
@xsfizzix what is your variable id?
var_default_image_placeholder?
If yes, then try:
onerror="this.onerror=null;this.src=dmx.parse('var_default_image_placeholder.value');"
Be aware of timing…
Make sure that your script is not running before app connect is loaded and this variable is empty!
Thanks so much for the reply @famousmag! Your guess on the variable name is correct.
I tried this route and it didn’t seem to work as well. I started a new page as simple as could be to try and get this working as a test. To attempt to rule out an appconnect timing issue, I wrapped a second test image inside a conditional region to enforce appconnect loading prior to resolution (but maybe this is a bad assumption?)
Any ideas on how to get the defaults to be dynamic in a simple sandbox like this?
Not a good answer in my mind right now…
But I see this is kind of “too much”.
If an image fails to load then it is defined dynamically somewhere the image to load instead.
What defines which image will be the default “errorImage”?
It reminds me a kind of CMS that each user defines his default “errorImage”…
You see? I started the questions now… 
Anyway a fast answer (not tested, not reliable…) would be to have that “errorImage” loaded in a session or a $_ENV variable and on page.load() pass it to your variable 