顯示在鉻和Firefox

圖像的下面的HTML字符串被正確地顯示爲在鍍鉻的圖像，但在Firefox將未示出：顯示在鉻和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;

如果我有這個設置的多個圖像，那麼只顯示第一個圖像。

有沒有人知道爲什麼會發生這種情況？

來源

2016-10-17 Snickbrack

是對'數據URI'設定在'的src'''在問題數據URI的完整文本？ – guest271314

@ guest271314是的，這是一個服務器相對uri – Snickbrack

你是什麼意思的「服務器相對uri」？數據URI是如何創建的？ – guest271314

gif數據網址在Firefox中似乎存在錯誤。用x 1像素的透明圖像/ PNG網址替換它：

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

其中PNG dataURL從canvasObject.toDataURL("image/png")在Firefox的出現解決了背景圖像中檢測可見。

更新：圖像/ GIF數據URL，使用不同的源文件和轉換方法比你也適用明顯製備：

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

來源

2016-10-17 22:45:06 traktor53

謝謝;）我接近絕對的困惑：D – Snickbrack

顯示在鉻和Firefox

回答

相關問題