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-Class包含以下内容：

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数据网址在Firefox中似乎有问题。用1px x 1px透明图像/ png URL替换它：

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

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

更新一个image / gif数据网址，显然是使用不同的源文件和转换方法生成的，比你的工作方式还要好：

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

在Chrome和Firefox中显示图片

1 个答案: