使用 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')";

如果您正在为 React 中的元素设置样式，基本想法

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

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

Fallback CSS background image when setting style with javascript?

javascript

css

fallback

image

reactjs