嘿，刚好碰到过类似的需求，我来给你拆解这两个问题的解决方案！

首先得明确：<div>本身没有原生的onError事件，因为它不是专门用来加载外部资源的元素（像<img>、<script>这类才会自带资源加载的事件）。所以我们得用一个隐藏的<img>元素来代理检测图片加载状态，然后把逻辑同步到<div>上。

核心思路是：

• 提取<div>的content属性里的图片地址
• 创建一个看不见的<img>，让它去加载这个地址
• 监听这个<img>的onerror事件，触发时就给<div>替换默认内容

具体代码示例：

<div class="item" id="myDiv" style="content:url(https://itemimage.jpg)"></div>

<script>
// 获取目标div
const targetDiv = document.getElementById('myDiv');
// 提取CSS content里的图片URL（注意去掉引号）
const imgUrl = getComputedStyle(targetDiv).content.replace(/["']/g, '');

// 创建隐藏的测试图片
const testImg = new Image();
testImg.src = imgUrl;

// 图片加载失败时的处理逻辑
testImg.onerror = function() {
  // 替换div的content为默认图片
  targetDiv.style.content = 'url(https://your-default-image.jpg)';
  // 也可以加其他逻辑，比如显示提示文字
  targetDiv.textContent = '图片加载失败';
};

// 加载成功的话就保持原状态，不需要额外操作
testImg.onload = function() {
  console.log('图片加载成功，保持原显示');
};
</script>

针对你给出的这段代码：

<div class="item" style="content:url(https://itemimage.jpg)" alt="No Product Image" ></div>

这里的alt属性在<div>上是无效的，我们可以用自定义属性来存储默认图片地址，方便维护。下面是批量处理所有.item元素的方案：

<!-- 给每个div加上data-default-url存储默认地址 -->
<div class="item" style="content:url(https://itemimage.jpg)" data-default-url="https://default-product.jpg"></div>
<div class="item" style="content:url(https://another-item.jpg)" data-default-url="https://default-product.jpg"></div>

<script>
// 遍历所有需要处理的.item元素
document.querySelectorAll('.item').forEach(div => {
  // 提取当前content里的图片URL
  const currentImgUrl = getComputedStyle(div).content.replace(/["']/g, '');
  // 获取自定义属性里的默认地址
  const defaultImgUrl = div.dataset.defaultUrl;

  // 如果没有设置content图片，直接跳过
  if (!currentImgUrl || currentImgUrl === 'none') return;

  // 创建测试图片
  const testImg = new Image();
  testImg.src = currentImgUrl;

  // 加载失败时替换为默认图片
  testImg.onerror = () => {
    div.style.content = `url(${defaultImgUrl})`;
    // 可选：如果需要显示提示，可以加个伪元素或者直接设置文字
    div.setAttribute('title', '产品图片加载失败');
  };
});
</script>

额外注意点 #

• 如果是动态生成的<div>（比如通过JS添加到DOM），要在元素插入DOM后再执行这段检测代码，或者用MutationObserver监听DOM变化自动处理。
• 跨域图片的问题：如果图片来自不同域名，确保服务器配置了CORS，否则部分浏览器可能无法正常触发onerror事件（不过现在主流浏览器已经支持跨域图片的错误监听了）。
• 性能考虑：如果页面上有大量这类<div>，可以考虑复用测试图片对象，或者做防抖处理，避免创建过多Image实例。

内容的提问来源于stack exchange，提问作者KUL