如果url为空，则替换背景图像

Question

我需要用从firebase检索到的背景图像来完成<div>块。我希望如果存储在Firebase上的图像是空的，那么背景应该被存储在本地目录中的默认照片所取代。语法应该是什么样的？

let pic = 'dirtophoto.jpg'
<div className="card__header" style={{ backgroundImage: `url(${person.backgroundImage[person.backgroundImage.length-1].url})` }}>

当图像为空时，如何用pic替换样式的内容？

Answer 1

实现这一点的一种方法是使用2背景图像

background-image: url(main.jpg), url(default.jpg);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;

或缩写

background: url(main.jpg) right bottom no-repeat, url(default.jpg) left top repeat;

在本例中，default.jpg将首先加载，然后加载main.jpg。如果main.jpg不存在，default.jpg仍然存在。

Answer 2

您可以添加功能并检查图像是否存在

setBackgroundImage() {
let pic = 'your/default/image.jpg';
let imageUrl = person.backgroundImage[person.backgroundImage.length-1].url;
if (url != undefined) {
return imageUrl;
} else {
return pic;
}
}

现在你可以像一样使用这个功能

<div style={{ backgroundImage: `url(${setBackgroundImage()})'}}></div>

Answer 3

我假设person.backgroundImage[person.backgroundImage.length-1].url在firebase上不存在图像的情况下返回一个错误值(null、undefined、0或空字符串(。

清除后，我们可以评估||(或(操作员的回退

<div className="card__header" style={{ backgroundImage: `url(${person.backgroundImage[person.backgroundImage.length-1].url || pic})` }}>

Answer 4

您可以将默认图像放在背景中，并将动态图像设置为<img>作为该块的子图像。每当图像未加载时，将显示默认图像