使用javascript设置样式时后备CSS背景图像？

【问题标题】：Fallback CSS background image when setting style with javascript?使用javascript设置样式时后备CSS背景图像？
【发布时间】：2021-01-20 15:47:39
【问题描述】：

在常规 CSS 中，我可以使用它来设置后备图片，以防第一张图片不存在或加载失败：

.container {
  background-image: url(pics/img.webp), url(pics/img.png);
}

但是，当我在 javascript 中设置样式（如使用 React）时，如何实现呢？

感谢您的帮助:)

【问题讨论】：

与 CSS 一样吗？你如何使用 React 进行设置？

标签： javascript css reactjs image fallback

【解决方案1】：

与 CSS 没有什么不同

document.body.style.backgroundImage = "url('pics/img.webp'), url('http://placekitten.com/200/300')";

如果你在 react 中为元素设置样式，基本思路

style={{  
  backgroundImage: `${bgImagePath}, ${bgFallbackPath}`,
  backgroundPosition: 'center',
  backgroundSize: 'cover',
  backgroundRepeat: 'no-repeat'
}}

【讨论】：

不错！我以为我昨天试过了，但我一定做错了什么。它现在起作用了！谢谢你:)
这会加载两张图片，不利于优化