使用CSS的::after偽元素覆蓋默認(rèn)的斷鍊圖片圖標(biāo)，通過定位顯示自定義文本或圖標(biāo)；2. 結(jié)合JavaScript監(jiān)聽onerror事件，為損壞的圖片添加特定類名以應(yīng)用背景圖或樣式；3. 直接在HTML中使用onerror內(nèi)聯(lián)腳本將失效圖片源替換為默認(rèn)佔(zhàn)位圖，從而實(shí)現(xiàn)友好的用戶界面展示。

When an image fails to load, browsers display a default broken image icon. While you can't directly style the broken image icon itself (it's rendered by the browser), you can hide it and replace it with custom fallback content using CSS and HTML techniques.

Here's how to handle and style a fallback for broken images:

1. Hide the broken image and show fallback text or icon

You can hide the broken image and display custom content (like text or a placeholder icon) using the ::before or ::after pseudo-elements.

HTML:

 <img class="image-fallback lazy"  src="/static/imghw/default1.png"  data-src="missing-image.jpg"  alt="如何在CSS中設(shè)計(jì)損壞的圖像圖標(biāo)">

CSS:

 .image-fallback {
  width: 200px;
  height: 150px;
  object-fit: cover;
  font-family: 'Arial', sans-serif;
  font-size: 14px;
  color: transparent;
  border: 2px solid #ddd;
  border-radius: 6px;
  position: relative;
  background: #f7f7f7;
}

.image-fallback::after {
  content: "Image not available";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #888;
  font-size: 12px;
  white-space: nowrap;
  z-index: 1;
}

.image-fallback[src*=""],
.image-fallback:not([src]) {
  opacity: 0;
}

Note: The ::after element only appears if the image fails to load and the browser still renders the <img src="/static/imghw/default1.png" data-src="photo.jpg" class="lazy" alt="如何在CSS中設(shè)計(jì)損壞的圖像圖標(biāo)" > tag. The trick relies on positioning fallback content over the image area.

2. Use JavaScript to replace broken images

Since CSS alone can't detect image loading errors, combining it with JavaScript gives better control.

JavaScript:

 document.querySelectorAll('img').forEach(img => {
  img.onerror = () => {
    img.src = ''; // Clear invalid src
    img.classList.add('broken');
  };
});

Now, when an image fails, it gets a broken class.

CSS for the broken class:

 img.broken {
  background: #f0f0f0 url(&#39;data:image/svg xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#ccc"><path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/><path d="m17.7 14.3-2-2c-.4-.4-1-.4-1.4 0l-1.6 1.6-1.6-1.6c-.4-.4-1-.4-1.4 0l-2 2V7h10.4zm-4.3-4.3c.8 0 1.5-.7 1.5-1.5S14.2 7 13.4 7 11.9 7.7 11.9 8.5s.7 1.5 1.5 1.5z"/></svg>&#39;) center/40px no-repeat;
  border: 1px dashed #ccc;
  color: #aaa;
}

img.broken::after {
  content: "Image missing";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
}

This method gives full control — you can use a background SVG, placeholder color, or even a default image.

3. Alternative: Use a default image as fallback

Instead of styling text, swap in a default image when the original fails.

 <img src="/static/imghw/default1.png"  data-src="photo.jpg"  class="lazy" onerror="this.onerror=null; this.src=&#39;placeholder.jpg&#39;;" alt="Fallback example">

This is a concise inline solution. The this.onerror=null prevents infinite loops if the fallback image also fails.

Summary

• You can't style the browser's broken image icon directly .
• Use CSS with ::after to overlay fallback text/icon.
• Combine with JavaScript for reliable detection.
• Use onerror to swap in a default image.

With these techniques, you can create a clean, user-friendly fallback experience.基本上就這些。

以上是如何在CSS中設(shè)計(jì)損壞的圖像圖標(biāo)的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！