我网站上的图片无法在移动浏览器中加载答案

【问题标题】：Images from my website won't load in mobile browsers我网站上的图片无法在移动浏览器中加载
【发布时间】：2021-07-12 06:38:55
【问题描述】：

我正在构建一个非常基本的“Hello World”HTML/CSS 网站来习惯从头开始编码（以前我非常依赖 Dreamweaver 的反复试验！）。

在我的笔记本电脑上一切看起来都很棒，但我想测试该网站在移动浏览器上的显示效果，因此我将网站文件夹保存到我的 Dropbox 并尝试从我的 Android 手机加载主页。

页面加载完美，但我没有一张图片 - 我只是得到替代文本。 Android 的原生浏览器和 Opera 移动版都是这种情况。

我已经尝试了 .jpg 和 .gif 文件类型，并且还按照此处另一个线程的建议添加了固定宽度、高度和边框值（这会改变 alt 文本占位符的形状，仅此而已）。我还在<img> 标记的尾部添加了一个“/”，但同样无济于事。

我很惊讶对于这样一个基本页面来说这是一个问题，但是我已经在我正在使用的教科书中对我的所有代码进行了三次检查，所以除了在这里发布之外我不知道该怎么做！

相关图片的HTML如下：

<div id="banner"><img src="750x262PxBanner.gif" width="100%" alt="banner"></div>

除了padding-top: 10px，我没有此 div 的 CSS，并且图像与它所在的页面位于同一文件夹中 - 正如我所说，这是一个非常基本的网站，在我的笔记本电脑上看起来不错！

提前感谢您的任何建议。

【问题讨论】：

【解决方案1】：

尝试从您的smartphone 访问图片的 URL，并检查图像是否正确加载（访问 .../750x262PxBanner.gif 而不是 .../index.html）：可能是智能手机的 URI 不正确，或者文件格式不正确t 支持。

重命名图片以避免区分大小写（仅使用小写）。

否则，请尽量不要以 [0-9] 开头图片的名称。

【讨论】：

Opera for Android 和原生 Android 浏览器支持哪些文件格式？我的印象是 .jpg 和 .gif 与 .png 一样是实现最大兼容性的最佳选择。
@user2342949 我不知道支持的图像格式的完整列表，但 jpg、png 和 gif 有几种变体，例如索引、灰度或 RGB(A) 颜色，压缩...您可能在图片中使用了其中一些变体，Opera/Android 无法识别这些变体。尝试直接访问图片并检查智能手机是否识别您使用的格式（和变体）。如果没有，请不要使用外来变体并保持 RGB 颜色、未压缩的图片。

【解决方案2】：

一些建议：

尝试以像素为单位给出该图像的宽度和高度并重新检查。喜欢这个<img src="750x262PxBanner.gif" width="750px" height="262px" alt="banner"> （没有太大意义，但可能在极少数情况下有效）
尝试放置绝对图像路径以了解加载是否存在问题。
尝试将图像重命名为横幅或不带数字的名称。（同样，真的没有多大意义，但可能有效也可能无效）
尝试通过某些主机托管文件或在某些 FTP 上上传相同的文件

【讨论】：

你应该把它写成评论。 StackOverflow 遵循问答模式；这不是一个讨论论坛。
好的，我试过
-和以前一样的问题，它只是调整占位符的大小。
user2342949 - <img src="750x262PxBanner.gif" width="750px" height="262px" alt="banner"> - 更新代码
@ClassStacker - 我已经更新了我的答案并评论了与对 user2342949 的回复相同的评论。
分别并同时尝试了 1 和 3 - 没有。至于绝对文件路径，这取决于我是从移动保管箱还是笔记本电脑保管箱访问文件，因此不想使用它。正如我之前所说，图像文件与页面的 html 文件位于同一文件夹中，页面的其余部分加载正常，包括链接到 CSS（该文件夹中的单独文件）。