IE8 圖片 src 為空顯示破碎圖標：CSS display:none 默認隱藏

現象：<img src=""> 在 IE8 顯示「破碎圖片」圖標 (紅叉)，現代瀏覽器不顯示。

解決方案：默認隱藏，有效時顯示

<img id="myImg" src="" style="display: none;" />

<script>
function setImage(url) {
    var img = document.getElementById('myImg');
    if (url) {
        img.src = url;
        img.style.display = '';  // 或 'inline'/'block'
    } else {
        img.style.display = 'none';
    }
}
</script>

原理

• IE8 對空 src 會嘗試請求當前頁面 URL，返回 HTML 而非圖片，導致破碎圖標。
• display: none 使元素不佈局、不渲染，完全避免破碎圖標出現。
• 動態賦值 src 後再 display='' 顯示。

替代方案

• 設置 src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" (1x1 透明 GIF) 作為佔位符。
• 使用 onerror="this.style.display='none'" 失敗時自動隱藏。

默認 display:none 是最簡潔、兼容性最好的解決方案。