Safari Shows Broken Images (only sometimes)

Jacob Mallach asked on May 9, 2018 22:06

Hello,

I've got a funny one.

This image displays in Safari only some of the time.

https://www.just-an-example.com/media-library/homepage/campus-desktop-img

Note the absent file extension (not a mistake), the CMS is using the path as an alias. No console errors. No 404 errors. Safari does not load the image and rather displays a blue question mark to indicate the file is missing. I'm unable to recreate the error, and a hard refresh fixes the issue and loads the image.

Anyone have any ideas as to what is going on?

Thanks for the help!

image processing

Recent Answers

Rui Wang answered on May 9, 2018 22:09

are you storing the image in the content tree as file type instead of in the media library? That looks like a extension less URL for an content tree item.

0 votesVote for this answer Mark as a Correct answer

Jacob Mallach answered on May 9, 2018 22:10

Hi Rui,

Yes, we are storing the image as a file type in the content tree.

0 votesVote for this answer Mark as a Correct answer

Rui Wang answered on May 9, 2018 22:18

Are there special reason you are storing image in the tree instead of media library?
How does that URL of the image been generated? When you insert the image into an editable text area or through some transformation?

0 votesVote for this answer Mark as a Correct answer

Jacob Mallach answered on May 9, 2018 23:02

Hi Rui,

We had been consulted that using file types within the content tree improves search opts.

In regards to image transformations. The get/set is done server side.

data-image="<%#String.Format("{0}",URLHelper.RemoveExtension(URLHelper.RemoveQuery(largeImg).Trim().Replace("~","")))%>

Then on-page-load, we have some JavaScript which gets the data-image property value, and assigns it to a css background-image as an inline style.

style="background-image:url("/Media-Library/Homepage/campus-desktop-img");"

0 votesVote for this answer Mark as a Correct answer

Rui Wang answered on May 9, 2018 23:25

Not sure why back group image need search opts. But that aside, why do you purposely remove the extension for image? I'm not sure if Safari has any issues with images without extension.

Also in your transformation RemoveQuery(largeImg), is largeImg a field in a page type that you would select an image from the tree? Is that storing the URL of the image like /Media-Library/Homepage/campus-desktop-img.jpg and then you remove the extension?

0 votesVote for this answer Mark as a Correct answer

Jacob Mallach answered on May 9, 2018 23:43

Hi Rui,

This is inherited code, so I'm not sure the reason for removing the file extension. Had the same thought regarding Safari's ability to render extension-less image files. Yes, largeImg is a url field set via custom widget.

0 votesVote for this answer Mark as a Correct answer