使用 javascript 设置样式时回退 CSS 背景图像？

Question

在常规 CSS 中，我可以使用它来设置后备图像，以防第一张图像不存在或加载失败：.container {   background-image: url(pics/img.webp), url(pics/img.png); }但是，当我在 javascript 中设置样式时（比如 React），如何实现呢？感谢您的任何帮助 ：）

Answer 1

与 CSS 无异

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

如果你在反应中设计一个元素，基本的想法

style={{  

  backgroundImage: `${bgImagePath}, ${bgFallbackPath}`,

  backgroundPosition: 'center',

  backgroundSize: 'cover',

  backgroundRepeat: 'no-repeat'

}}