背景图片的onerror属性答案

【问题标题】：Onerror attribute of background image背景图片的onerror属性
【发布时间】：2021-04-11 17:32:06
【问题描述】：

HTML

<body>
    <form class="ipform">
        <label>CAM IP :</label>
        <input type="url" id="ip_cam">
        <input type="button" id="connectBtn" onclick="getIp()" value="CONNECT">
    </form>
    
    <script src="js/script.js"></script>
</body>

CSS

body {
  overflow: hidden;
  box-sizing: border-box;
  background-color: #1f1f29;
  background-image: url("https://images.unsplash.com/photo-1606851361385-9a2ead6ce3ab?ixid=MXwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=751&q=80");  
  background-repeat: no-repeat;
  background-size: cover;
  background-size: 100% 100%;
  background-attachment: fixed;
}

function getIp() {
  var x = "url('";
  var y = document.getElementById("ip_cam").value;
  var z = "')";
  var xyz = x + y + z; //"url('" get from y "')
  document.body.style.backgroundImage = xyz;
}

在输入框中插入图片的url，背景图片会发生变化。
现在，对于无效链接，如何设置默认背景图片
background-image 必须用作 CSS 属性而不是 html 中的 div
随机尝试了下面的这些代码。但是什么都没发生。我对 JavaScript 不太熟悉 请帮忙..

// function myFunction() {
//   document.body.style.backgroundImage = "url('assets/error3.gif')"
// }
// if(   document.body.style.backgroundImage.onerror = null )

// {
//   myFunction();
// }
// document.body.style.backgroundImage.addEventListener("error", myFunction);

【问题讨论】：

您可以使用 Image() 对象并使用 onload、onerror 事件来检查其是否有效。
看看 - stackoverflow.com/questions/22287474/…

标签： javascript html jquery css event-listener

【解决方案1】：

如果将第二个 url 添加到 background-image 属性中，如果第一个未加载，则将加载第二个。

function getIp() {
  var x = "url('";
  var y = document.getElementById("ip_cam").value;
  var z = "'), url(assets/error3.gif)"; //added here with comma
  var xyz = x + y + z; 
  document.body.style.backgroundImage = xyz;
}

【讨论】：