ทำให้ firefox แสดงภาพเสีย

ปกติแล้วผู้พัฒนาเว็บด้วย firefox จะเจอสิ่งหนึ่งที่ดูจะเป็นปัญหาคือ เมื่อมีภาพที่ลิ้งค์เสีย หรือภาพเดี้ยง
firefox จะทำให้ภาพนั้นเป็นพื้นที่ว่างเปล่า หรือแสดงแต่ข้อความใน alt="..." ออกมาแค่นั้น

ปกติแล้วของแบบนี้มันก็ดีสำหรับผู้ใช้เท่านั้น แต่สำหรับนักพัฒนาอย่างเรามันทำให้เราไม่เห็นภาพเสีย ทำให้งานผิดพลาดรอดสายตาไปได้ง่ายๆ

วิธีแก้ไขให้แสดงภาพเสีย

วิธีใหม่ อัปเดท 2026

ติดตั้งปลั๊กอิน Violentmonkey.

เพิ่มโค้ดนี้ลงไป

// ==UserScript==
// @name         Force Broken Image Icon (Firefox)
// @namespace    https://violentmonkey.github.io/
// @version      3.0
// @description  Show Firefox's native broken image icon via -moz-force-broken-image-icon, fixing zero-size broken images.
// @match        *://*/*
// @run-at       document-start
// @grant        GM_addStyle
// ==/UserScript==

(function () {
  'use strict';

  // 1) The one line that actually matters
  GM_addStyle(`
    img {
      -moz-force-broken-image-icon: 1;
    }
  `);

  // 2) The icon only renders if the <img> has layout size.
  //    Dead links with no width/height (attribute or CSS) render 0x0
  //    and the icon is invisible — so give those a minimum size.
  function fix(img) {
    if (img.complete && (img.naturalWidth === 0 || img.naturalHeight === 0)) {
      const r = img.getBoundingClientRect();
      if (r.width === 0)  img.style.setProperty('width', '64px');
      if (r.height === 0) img.style.setProperty('height', '64px');
    }
  }

  window.addEventListener('error', (e) => {
    if (e.target && e.target.tagName === 'IMG') fix(e.target);
  }, true);

  function scan(root) {
    if (root.tagName === 'IMG') fix(root);
    if (root.querySelectorAll) root.querySelectorAll('img').forEach(fix);
  }

  window.addEventListener('DOMContentLoaded', () => scan(document.documentElement));
  window.addEventListener('load', () => scan(document.documentElement));

  new MutationObserver((muts) => {
    for (const m of muts) {
      for (const n of m.addedNodes) {
        if (n.nodeType === 1) scan(n);
      }
      if (m.type === 'attributes' && m.target.tagName === 'IMG') fix(m.target);
    }
  }).observe(document.documentElement, {
    childList: true, subtree: true,
    attributes: true, attributeFilter: ['src']
  });
})();

วิธีเก่าใช้ได้ในเบราว์เซอร์รุ่นเก่า

พิมพ์ about:config ที่ address bar
filter คำว่า image
มองหา browser.display.show_image_placeholders เช็คให้แน่ใจว่ามีค่าเป็น true (ปกติค่าเดิมคือ true)

เปิด folder %appdata%\Mozilla\Firefox\Profiles<username>\chrome
ตัวอย่างเช่น C:Users\<my windows username>\AppData\Roaming\Mozilla\Firefox\Profiles<text>.default\chrome

ทั้งนี้หากไม่มี folder chrome ก็ขอให้สร้างขึ้นมา

สร้างไฟล์ชื่อ UserContent.css แล้วก๊อปปี้โค้ด css ต่อไปนี้ไว้ข้างในไฟล์


/* Enable image placeholders */
@-moz-document url-prefix(http), url-prefix(file) {
    img:-moz-broken{
        -moz-force-broken-image-icon:1;
        width:24px;
        height:24px;
    }
}

บันทึกไฟล์นี้ จากนั้นก็ restart firefox เป็นอันเสร็จขั้นตอนทั้งหมด

ตัวอย่างรูปที่ควรจะแสดงผลถูกต้อง.

ตัวอย่างรูปที่เป็น dead link เช่น <img src="not-exists-image-20260902.jpg" alt="dead image" />

จะพบว่าตัวแทนภาพเดี้ยงปรากฏมาแล้วครับ

วิธีแก้ไขให้แสดงภาพเสีย

วิธีใหม่ อัปเดท 2026

วิธีเก่าใช้ได้ในเบราว์เซอร์รุ่นเก่า

ใส่ความเห็น ยกเลิกการตอบ