如果 url 为空，则替换背景图片答案

【问题标题】：Replace background image if the url is empty如果 url 为空，则替换背景图片
【发布时间】：2021-09-22 03:08:35
【问题描述】：

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

let pic = 'dir\to\photo.jpg'

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

图片为空时如何将style的内容替换为pic？

【问题讨论】：

你可以这样做<img class="cc_image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="background-image: url(*your remote image*)"/>

标签： javascript html reactjs frontend

【解决方案1】：

您可以将默认图像放在背景中并将动态图像设置为<img>作为该块的子级。只要图片没有加载，就会显示默认图片

【讨论】：

【解决方案2】：

我假设 person.backgroundImage[person.backgroundImage.length-1].url 如果图像不存在于 firebase 上，则返回一个虚假值（null、未定义、0 或空字符串）。

清除这些后，我们可以通过 ||(or) 运算符评估回退，

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

【讨论】：

【解决方案3】：

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

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>

【讨论】：

【解决方案4】：

解决此问题的一种方法是利用 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 不存在，则默认仍然存在。

【讨论】：