html - 图像 .HEIC 未在浏览器上正确加载
问题描述
我们有一个移动应用程序,可以将图像上传到我们的网络服务器,这些图像显示在仪表板上,该仪表板可以在 chrome、IE 和 Firefox 最新版本等浏览器上打开;我们的用户拥有windows 7 机器甚至是Android 或IOS 手机;从 IOS 11 上传的扩展名为 .HEIC 的图像无法在任何设备上正确显示;在告诉我 Windows 7 和 ANDROID 不支持 .HEIC 图像之前,我已将图像从网络服务器带到我的 PC:如果我右键单击该图像并打开它,谁能告诉我为什么它成功打开的任何浏览器?!为什么,使用相同的浏览器,它不会通过仪表板显示?在将其转换为任何兼容类型(如 jpeg 或 png)之前,我需要知道是否可以以某种方式解决问题。以下是我的仪表板最终代码和浏览器抛出的错误示例:
<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已登录控制台:加载资源失败:服务器以 404 (Not Found) 状态响应,如果我将源粘贴到浏览器中,则会引发相同的错误
IE 11未记录任何错误且未显示图像
FireFox确实记录了任何错误并且图像也没有显示
Safari记录了与 chrome 相同的错误
但是图像作为另外两个存在于文件夹中;这 3 个具有相同的 URL,但它们的名称和扩展名略有不同......有什么提示吗?
解决方案
在您的网址中,10 之后有一个额外的 /。
http://myImageURL.com/My_Folder/10//2018/0618/123456/CLIENT%5C29-06-2018%2009-37-16%20AM-942.HEIC
我假设这是在这里提交时的错字。
对于 HEIC,它是 iOS 上的 Apple 格式。由于许可协议,浏览器不支持此文件类型。我猜您的计算机正在以某种方式转换图像,或者程序能够识别文件类型。
简而言之,在浏览器开发人员编写支持之前,没有一种将这些图像显示为 .HEIC 的好方法。
这是一篇关于解决方案的在线文章。它是在 2020 年编写的,因此可能会有更好的选择。
https://shkspr.mobi/blog/2020/12/coping-with-heic-in-the-browser/
CDN 选项可能是最好的选择,因为您在移动应用程序上提供图像。
推荐阅读
- model-view-controller - 全屏显示 MVC CORE VIDEO 块
- c++ - 带指针的 C++ 程序显示异常行为
- php - PHP:压缩图像(有损?)
- python - 如何在 tkinter 画布中将图像移动到其他图像之上?
- python - Product Category Labelling Automation using Python
- powershell - Powershell:JSON的对象列表
- swift - 在 iOS14.4 的 SwiftUI 中使用 .insetGrouped listStyle for List 导致数据问题
- jenkins-pipeline - 如何修复“groovy.lang.MissingMethodException:没有方法签名:Script1.pipeline() 适用”
- visual-studio-code - 在 VSCode 中获取大文件的整理搜索结果
- c++ - 这个警告在 C++ 中对异常处理意味着什么?