图像未在 chrome 上的 codepen 上加载？答案

【问题标题】：Images are not loading on codepen on chrome?图像未在 chrome 上的 codepen 上加载？
【发布时间】：2018-07-18 04:49:42
【问题描述】：

当我对图像使用本地存储时，图像可以在 Firefox 和 chrome 上运行，但是当我将图像上传到 imgur 并将它们加载到 codepen 时——它仅适用于 Firefox，图像根本无法加载chrome，为什么会这样？

<img src="https://i.imgur.com/OBiyZL0.jpg" alt="Blog Thumbnail">
background: url('https://i.imgur.com/6RELfrW.jpg') no-repeat;

这就是我的做法，CSS 用于与显示的 html 不同的元素，但在 codepen/chrome 上都不起作用。

另外，chrome 上的导航栏不能正常工作，为什么 justify-content: right;不行？

有问题的codepen：https://codepen.io/anon/pen/RBRJEN

【问题讨论】：

标签： html css codepen

【解决方案1】：

Imgur 图片提供403 error。而不是 imgur 尝试使用一些在线图像服务，例如 https://imgbb.com/。它会起作用的。

我使用的图片链接是https://ibb.co/cDR14J

.splashCover {
  margin-top: 0;
  height: 200px;
  background: url('https://ibb.co/cDR14J') no-repeat;
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: top;
  filter: opacity(.6);
}

下面是工作代码笔：

https://codepen.io/anon/pen/EpyRMO

【讨论】：