Question

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

要复制此错误，请从标记为Alien的下拉菜单中选择Shape:，然后单击"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不会包含图像文件，但可能会帮助您浏览代码。

Answer 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。

为什么我的图像只能在台式机上加载，而不能在移动设备上加载？

1 个答案: