在Chrome和Firefox中显示图像

Question

以下HTML-String在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来自canvasObject.toDataURL("image/png") ，从而使背景图像在测试中可见。

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

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