Html 某些图像未在移动浏览器中显示（但在桌面浏览器中显示）

我遇到了一个问题，有些图像没有显示在iPhone的移动浏览器中，但我在所有桌面浏览器中都能看到它们。在我的手机上，我只看到一个带有灰色边框的空白框

几句话：

• 这似乎是随机发生的，因为某些图像在某一天显示，然后在第二天停止显示
• 我注意到，如果在页面仍处于加载状态时滚动页面，我经常可以看到图像，然后图像就会消失
• 所有图像都放在

  IMG

  标签中，不显示 背景图像。所有的链接和文件名都是正确的
• 在过去，我可以通过重新保存图像，然后重新上传来修复其中的一些问题，但之后它通常会恢复到相同的消失行为

---

您的图像可能很大吗
从本页开始，关于：
IOS在Safari Mobile中强制执行最大图像大小。在大多数情况下，它比网页上使用的要大得多。在开发HTML5游戏和使用大型基于帧的动画的交互式应用程序时，可能会遇到这种限制。如果包含的图像大于最大大小，则不会加载该图像
图像类型有不同的限制：JPG图像最多可解码32百万像素，而PNG、GIF和TIFF图像最多可解码3-5百万像素（取决于设备）。PNG、GIF和TIFF的最大大小因设备上的RAM而异。RAM小于256 MB的设备可以是3个解码MP，而其他iOS设备限制为5个解码MP
注意，限制不是通过图像的文件大小来衡量的，而是通过解码像素的数量来衡量的。一个解码的百万像素（MP）等于一个尺寸为1024×1024像素的图像，无论压缩程度如何
有一些关于处理大量图像的建议（扩展为大图像）。链接页面上的内容只是建议使用javascript根据需要加载图像，然后卸载屏幕上不再可见的图像。作者发现，可以通过将

img

元素的

src

属性修改为更小的图像来卸载图像。一段时间后，垃圾收集器将拾取原始图像（如果我正确读取了他的代码，大约6秒）
上面链接中的示例：

var img = document.getElementById('idOfTheImageToUnload');
img.src = 'images/empty.gif';

另一种从DOM中完全删除图像的方法（作者声明必须在超时时执行此操作，以确保GC拾取删除的图像）

---

发生在我身上的事情是，我使用的是背景图片，我错过了url上的结尾“；”。因此，图像仍会显示在我的电脑中，但不会显示在任何移动浏览器上。所以，对于像我这样的疯子来说，他们可能太累了，想不出这一点。别忘了确保url是正确的：
我的错误

url(resoures-services-dedicated-support.jpg

正确的方法

url(resoures-services-dedicated-support.jpg);

---

免责声明，尽管这可能不是正确的答案，相信我，伙计们，看到这一点我会省下几个神经元。
您可以根据显示大小调整图像大小。这是我的项目标志的示例代码，它起作用了

<div class="image"><a href=/displayimage.php"><img src=/dir1/dir2/image.png" srcset="/assets/image.png **0.8**x" alt="image"/></a></div>

---

选择一个可靠的4x、3x、0.5x尺寸，或者包括一些用于动态显示的尺寸。
我知道这篇文章是5年前写的，尽管我最近遇到了这个问题，它很简单，就像在移动浏览器中使用支持的图片格式一样

---

示例：不要使用（.webp）中较不常见的文件类型，尝试使用.jpeg或.png中较常见的文件类型。
是的，在加载视网膜大小的图像时，图像的尺寸通常相当大。这是否只是某些时候的问题……因为它不会影响所有大型图像？从该页面的文本来看，JPG图像的限制似乎远远高于PNG、GIF或TIFF格式图像的限制。该图像是否出现在任何JPEG图像中？如果不是，当JPEG图像可能相当大时，是否可以简单地使用JPEG图像？是的，JPEG图像就是这样。图像为1400x1000（视网膜为2800x2000）。这可能是一个问题，视网膜大小正在加载到手机上，而iOS无法处理？我已经用其他来源修改了我的答案。它们可能对你的情况有用，也可能没有。非常感谢你的帮助。这似乎只是文件太大的问题。我将进行一些设计更改以修复它。您试图在页面上加载多少图像？当只有很少的图片时会出现这个问题吗？但是当我们查看google page insights时，他们建议使用.webp格式而不是jpg或png格式。

<div class="image"><a href=/displayimage.php"><img src=/dir1/dir2/image.png" srcset="/assets/image.png **0.8**x" alt="image"/></a></div>