javascript - 在 Chrome 和 Firefox 中显示图像

Question

以下 HTML 字符串在 Chrome 中正确显示为图像，但不会在 Firefox 中显示:

<img class="blog__entry__image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" alt="" style="background-image: url('/GBlog/content/images/post_images/28_09_2016_15_56_41_splist.png');">

CSS 类包含以下内容:

display: block;
width: 100%;
height: 300px;
background-size: cover;
background-position: center;
background-attachment: scroll;
border-image-width: 0;
border-style: none;
background-repeat: no-repeat;
box-shadow: none;
outline: none !important;

如果我有此设置的多张图片，那么只有第一张不会显示。

有人知道为什么会这样吗？

Answer 1

gif 数据 URL 在 Firefox 中似乎有问题。将其替换为 1px x 1px 透明图像/png URL:

src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg=="

PNG dataURL 来自 Firefox 中的 canvasObject.toDataURL("image/png")，使背景图像在测试中可见。

更新:一个图像/gif 数据 URL，显然是使用与您不同的源文件和转换方法生成的:

src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="