Image .HEIC not loaded properly on browsers

Question

We have a mobile app that uploads images to our web server and those images are displayed on a dashboard that opens on browsers like chrome, IE and firefox latest versions; Our users have windows 7 machines or even Android or IOS mobiles; Images with extension .HEIC uploaded from IOS 11 are not displayed properly on any device; Before telling me that Windows 7 and ANDROID do not support .HEIC images, I have taken the image from the webserver to my PC: can anybody tell me why if I right click on that image and open it with any browser it opens successfully ?! And why, using the same browser, it won't be displayed through the dashboard ? I need to know if I can fix the problem somehow before I convert it to any compatible type like jpeg or png. Below is my dashboard final code and examples of errors thrown by the browsers:

<div class="HAL_Upload_Image_container">
   <div class="HAL_Upload_Image" style="background-image:url('http://myImageURL.com/My_Folder/10//2018/0618/123456/CLIENT%5C29-06-2018%2009-37-16%20AM-505.PNG');"></div>
   <div class="HAL_Image_Name"> 29-06-2018 09-37-16 AM-505 </div>
</div>

<div class="HAL_Upload_Image_container">
   <div class="HAL_Upload_Image" style="background-image:url('http://myImageURL.com/My_Folder/10//2018/0618/123456/CLIENT%5C29-06-2018%2009-37-16%20AM-739.PNG');"></div>
   <div class="HAL_Image_Name">  29-06-2018 09-37-16 AM-739 </div>
</div>

<div class="HAL_Upload_Image_container">
   <div class="BAN_Upload_Image" style="background-image:url('http://myImageURL.com/My_Folder/10//2018/0618/123456/CLIENT%5C29-06-2018%2009-37-16%20AM-942.HEIC');"></div>
   <div class="HAL_Image_Name">  29-06-2018 09-37-16 AM-942 </div>
</div>

Chrome has logged in the console: Failed to load resource: the server responded with a status of 404 (Not Found), if I paste the source in the browser same error is thrown

IE 11 did not log any error and image is not displayed

FireFox did log any error and image is not displayed as well

Safari has logged the same error as chrome

BUT the image exists in the folder as the 2 others; The 3 have the same URL but their names and extensions differ a bit ... Any hints?

Answer 1

In your url, there is an extra / after the 10.

http://myImageURL.com/My_Folder/10//2018/0618/123456/CLIENT%5C29-06-2018%2009-37-16%20AM-942.HEIC

I'm assuming this was a typo when submitting here.

For HEIC, it is an Apple format on iOS. The browsers do not support this file type due to licensing agreements. I'm guessing your computer was somehow converting the image or the program was able to identify the filetype.

In short, there isn't a good way to display these images as .HEIC until the browser developers write in support.

Here is an article online that talks about solutions. It was written in 2020, so there may be better options out there.

https://shkspr.mobi/blog/2020/12/coping-with-heic-in-the-browser/

The CDN option may be the best bet since you are serving the images on a mobile app.