Question

虽然似乎有很多关于破解<img>处理的答案，以便在原件无法加载时显示替换图像，但我似乎找不到有关丢失背景图像的解决方案。

问题：如果未加载原始背景图片，如何显示其他背景图像？

我应用这样的背景图像：

<div style="background-image: url('img/test.jpg');"></div>

Answer 1

您可以使用javascript检查图片的可用性。

var img = new Image();
img.src = 'img/test.jpg';
img.onload = function() {
    // create a script that will append style using background-image with this source
}

img.onerror = function() {
    // create a script that will append style using background-image with new source
}

Answer 2

▶1 ^st选项→JavaScript：

您可以通过发送AJAX请求来检查图像是否在JavaScript中可用，如下所示：

conda install numpy

您现在可以使用上述功能进行检查并设置相应的网址：

function isAvailable(url) {
    var xhttp = new XMLHttpRequest;
    xhttp.onreadystatechange = function() {
        return xhttp.status != 404;
    };
    xhttp.open('head', url, false);
    xhttp.send();
};

▶2 ^nd选项→PHP：

如果你想在服务器端进行检查，那么你可以使用原生的 var element = document.getElementById("element"); imgUrl = isAvailable("main-url") ? "main-url" : "backup-url"; element.style.backgroundImage = imgUrl; 功能轻松一点：

file_exists()

缺少背景图像占位符

2 个答案: