为透明图像设置后备的最佳方法是什么？答案

【问题标题】：What is the best way to set a fallback for a transparent image?为透明图像设置后备的最佳方法是什么？
【发布时间】：2021-09-19 03:29:22
【问题描述】：

目前，我在加载图像时使用 20 像素的后备图像。问题在于透明图像。当它们被加载时，它们的背景图像看起来很模糊。使用主色或跟踪 SVG 会以不同的方式导致相同的问题。那么，我怎样才能为他们使用后备图片而不会产生这些副作用呢？

一种解决方案是在加载背景时移除背景。但这是一个好的解决方案吗？

更好的解决方案可能是仅删除透明图像的背景。有什么方法可以使用 Node JS 检测图像是否透明？所以，我只能对这些图像采取行动。

我正在使用 Gatbsy JS 和 gatsby-remark-relative-images 插件来自动化图像优化过程。但没有必要使用 Gatsby API 回答问题。

【问题讨论】：

标签： javascript css image background background-image

【解决方案1】：

在 javascript 中有一个 load 事件侦听器，您最好的选择可能是为每个“img”元素设置一个事件侦听器，以消除回退，

document.querySelectorAll('.loaded-img').forEach(elm => {
   elm.addEventListener('load', (event) => {
      event.target.previousElementSibling.remove() // This is generally bad practice IMO, 
      //here I'm assuming the fallback img is right before the actual img but for 
      //consistency may want to do something like 
      //event.target.parentElement.querySelector('.fallback-img').remove()
      //Could also just add a forwards animation to opacity 1 -> 1;
   }, { once:true }) // Only runs once per Image.
})

或者可以像这样向父级添加事件侦听器，

document.querySelector('.img-parent').addEventListener('load', (event) => {
   if (event.target.classList == 'image-class') // ... Same as above
})

【讨论】：

嗯...这是一个很好的答案。但我认为如果我可以使用 JavaScript 检测透明图像，我会有更多选择。例如，我可以让他们的背景变白。或者，我可以通过添加类仅将您的解决方案应用于那些。但只有在 javascript 中可以检测透明度时，我才能做到这些！
想必你已经找到了这篇文章stackoverflow.com/questions/45122264/… - 可以检测到“alpha”通道（与不透明度相关），但这仅用于画布 - 理论上你可以为每个 img 元素创建一个画布，但我承认这是一种 jank 并且可能非常滞后
嗯...我找到了那篇文章。但这并不是我真正想要的。为每个 Img 元素创建画布也不是解决方案。
如果，使用上面的解决方案，你只是将后备图像的样式更改为白色或其他东西，加载的 img 如果它不是完全不透明的，那么它后面会有那个样式但是如果它是完全的不透明，那么您无论如何都看不到白色后备图像？-本质上更改了所有样式的样式，无论如何它们都会被不透明图像所掩盖
您是在告诉我在加载图像时使用白色背景而不是删除背景吗？嗯，两者对我来说都是一样的。