Question

我有一个显示大量外部图像和缩略图等的网站，在一个页面上最多可以显示100个。我将URL抓取并索引到图像并将它们保存在mysql中，并使用此代码在查询的简单循环中显示它们。

<img src="<?php echo $row['img_url']; ?>" onerror="this.onerror=null;this.src='http://example.com/image.jpg';" width="150" height="150">

我使用该特定代码将任何损坏的图片网址替换为默认图片。

我的问题是，是否有可能使用javascripts onerror或其他东西捕获在找到损坏的网址时损坏的图片网址，以便我可以将网址传递回php并能够自动删除网址我的数据库？我对javascript不是很好，搜索后我似乎找不到类似于我想要的东西，我大多只是发现很多关于如何更换破损图像的帖子。
我对任何想法都很开放，原始图片网址来自$row['img_url']，你可以在代码中看到，但我知道我需要javascript或其他东西来捕获错误然后以某种方式将网址传递回php以便我可以自动执行删除过程，而不是仅使用我的currnt代码等默认图像替换图像。

Answer 1

您可以使用file_exists进行检查：

if(file_exists($row['img_url'])){
   echo '<img src="'.$row['img_url'].'" onerror="this.onerror=null;this.src="http://example.com/image.jpg";" width="150" height="150">';
}

Answer 2

你快到了。只需替换它：

this.src='http://example.com/image.jpg'

使用：

this.src='http://example.com/image-missing.php?url={$row['primaryKey']}&w=150&h=150'

现在，“image-missing.php”接收丢失文件的URL和丢失图像的预期大小。它需要做的是清理数据库（检查调用是否合法（1）并且引用的行存在（2）），并输出替换图像适当的大小。

（1）否则你只是将删除整个图像数据库的可能性交给第一个有时间的人。

（2）其他人可能加载了同一页面，并在一毫秒前调用了相同的脚本。

Answer 3

你应该尝试这样的事情（例子使用vanilla JS，没有jquery或任何第三方库）：

var allImages = document.querySelectorAll('img');
for (var i = 0; i < deleteLink.length; i++) {
    document.querySelector('img').addEventListener('error', function(e) {
        // Delete a user
        var url = "<DELETION_URL>";
        var xhr = new XMLHttpRequest();
        xhr.open("DELETE", url+'?resource=' + e.target.src, true);
    });
}

<DELETION-URL>应指向接受DELETE（或至少POST）个请求并读取资源参数的PHP脚本。然后，如果资源真正丢失，它将删除图像。

如何使用javascript捕获损坏的图像URL然后将URL传递给php？

3 个答案: