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

Question

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

要复制此错误，请从标记为Shape:的下拉菜单中选择 select 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/ 。 The assets you are linking to are using a starting slash ( /images/alien.png ), which will be relative to the base URL, so that would resolve to https://zjcrumpton.github.io/images/alien.png ,这不存在。

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