使用JavaScript设置样式时的后备CSS背景图片？

编程问答 2022-06-10

问题描述

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

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

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

谢谢您的帮助：）

解决方法

与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'
}}
fallbackimageimageimagejavascriptreactjsreactjsreactjsreactjs