在Chrome和Firefox中显示图像

Display of images in Chrome and Firefox

本文关键字：显示 显示图 图像 Firefox Chrome      更新时间：2023-09-26

以下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;

如果我有这个设置的多个图像，那么只有第一个不显示。

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

gif data 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=="
相关文章：