如何实现图片不存在时隐藏img边框且保留原有padding

完全可以通过JavaScript实现该效果，核心思路是监听img元素的加载错误事件，触发时修改对应元素的边框样式即可，padding属性不需要额外修改会自动保留原有配置。

步骤1：新增样式类（推荐方式，样式与逻辑分离更易维护） #

在你的CSS代码末尾添加如下样式，优先级足够覆盖原有边框规则：

.col-2 img.img-load-error {
  border: none;
}

步骤2：添加JavaScript逻辑 #

在页面底部或者DOM加载完成的回调中添加如下代码：

document.addEventListener('DOMContentLoaded', () => {
  // 选中页面所有img元素
  const imgs = document.querySelectorAll('img');

  imgs.forEach(img => {
    // 监听图片加载失败事件
    img.addEventListener('error', () => {
      img.classList.add('img-load-error');
    });

    // 兼容处理：src为空、或者页面加载前就已经加载失败的图片
    if (img.complete && img.naturalHeight === 0) {
      img.classList.add('img-load-error');
    }
  });
});

最简实现（不需要新增CSS类） #

如果不想额外加CSS类，也可以直接在JS中修改行内样式，行内样式优先级更高会自动覆盖原有类的边框规则：

document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('img').forEach(img => {
    const handleLoadError = () => img.style.border = 'none';
    img.addEventListener('error', handleLoadError);
    if (img.complete && img.naturalHeight === 0) handleLoadError();
  });
});

常见失效原因排查 #

如果之前写的JS没生效，大概率是以下两种情况：

• 样式优先级不够：原来的.col-2 img选择器优先级高于你设置的样式，用行内样式或者优先级匹配的类就能解决
• 没有处理提前加载失败的图片：如果JS执行的时候图片已经加载失败了，error事件不会再触发，所以要加complete和naturalHeight的判断逻辑

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