同事遇到一個狀況:某網頁的圖檔用 Chrome/Edge 檢視 OK,用 IE 卻無法顯示。

用以下範例重現問題:

demo.html 內容單純,未藏玄機:

<!DOCTYPE html>
<html>

<head>
    <style>
        img {
            display: block;
            margin: 6px;
            width: 320px;
        }
    </style>
</head>

<body>
    <img src="cat.png" />
    <img src="monkey.jpg" />
</body>

</html>

分別用 Chrome/Edge/Firefox/IE 瀏覽,大家都可正常顯示,只有 IE 不合群冒出叉燒包,:

老司機一聽症狀便心裡有數,用 more 指令檢查兩個圖檔的二進位內容,BINGO!

.png 檔起首處有 JFIF字樣,應為 JPEG 檔存成 .png;.jpg 檔字首有 NG 字樣,符合 PNG 檔案標識特徵,代表是 PNG 檔存成 .jpg 附檔名。遇到圖檔附檔名錯亂,Chrome/Edge/Firefox 能容忍並改依檔案特徵切換,但 IE 不行。

知道原因就好辦,校正附檔名,問題輕鬆秒殺。

Image file extension name issue in different browser.


Comments

# by IT-BA

我負責的module遇過兩次,還被開了兩張issue單……哈

# by kevin

從來沒遇過這種情況,學習了~

# by player

初看標題時,還以為是IE踩到Data URI scheme限制不能超過32KB的限制 沒想到卻是圖檔的副檔名的問題 orz

# by ByTim

這是直接W10重新命名,改副檔名發生的? 用程式轉換圖檔,應該不會有這問題吧?

Post a comment


21 + 17 =