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

【问题标题】：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);。顺便说一句，像这样缩小大图像通常是一种不好的做法，因为它必须在缩放之前加载整个图像。最好让图片保持原来的大小。

标签： javascript css image mobile

【解决方案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。

【讨论】：