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

Question

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

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

现场： https://zjcrumpton.github.io/tokeneconomy/

代码笔：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。