为啥我的图片只能在桌面上加载，而不能在移动设备上加载？

Posted 2023-03-25

技术标签:

【中文标题】为啥我的图片只能在桌面上加载，而不能在移动设备上加载？【英文标题】：Why do my images only load on desktop, but not mobile?为什么我的图片只能在桌面上加载，而不能在移动设备上加载？ 【发布时间】：2020-08-03 14:46:22 【问题描述】：

我正在创建一个 Web 应用程序。如果有帮助，我已经包含了 Codepen，以及指向实时站点的链接。当我在桌面浏览器上打开应用程序时，图像会加载。当我在移动浏览器上打开该网站时，我只看到图像的灰色轮廓。

要复制此错误，请从标记为Shape: 的下拉菜单中选择Alien，然后单击"clear and apply"。然后，单击任何黑色方块。它应该变成一个外星人头，你会看到它在桌面浏览器上运行，在任何移动浏览器中执行相同的过程，但这是行不通的。

直播网站：https://zjcrumpton.github.io/tokeneconomy/

Codepen：https://codepen.io/zjcrumpton/pen/rNOMZdr

.alienItem 
      content: url(/images/alien.png);
      height: 55px;
      width: 55px;
      justify-self: center;
      border-radius: 50px;
      margin-top: 5px;

Codepen 不会包含图像文件，但可能会帮助您查看代码。

【问题讨论】：

网站上也没有图片。也许它被您的桌面浏览器缓存了。哦，哇，知道这很有帮助，是的，它似乎已缓存在我的浏览器中，现在我看到实时版本没有图像。但是，当我在本地从 VS Code 实时运行我的服务器时，它们确实会加载...... 我在您的 html 中看不到 class='alienItem'，但也许是 javascript 使它具有该类。无论如何content: url(/images/alien.png); 应该是background-image:url(images/alien.png);。顺便说一句，像这样缩小大图像通常是一种不好的做法，因为它必须在缩放之前加载整个图像。最好让图片保持原来的大小。 【参考方案1】：

您链接到错误的地方。您的网站托管在https://zjcrumpton.github.io/tokeneconomy/。您链接到的资产使用的是斜杠 (/images/alien.png)，它与基本 URL 相关，因此将解析为不存在的 https://zjcrumpton.github.io/images/alien.png。

由于您的整个存储库都托管在https://zjcrumpton.github.io/tokeneconomy/，因此您应该链接到/tokeneconomy/images/alien.png，或者删除起始斜杠，或者链接到./images/alien.png。

【讨论】：