以下 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;
如果我有此设置的多张图片，那么只有第一张不会显示。
有人知道为什么会这样吗？
最佳答案
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=="
关于javascript - 在 Chrome 和 Firefox 中显示图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40095641/