如果映像损坏，请删除映像及其容器

Question

我只是想删除图像及其标题，以防图像无法使用html或JavaScript加载或损坏。

<?php

include("../includes/db.php");   // ../ means go to parent directory
$query='SELECT * FROM `table` WHERE tag NOT IN("news") ORDER BY `id` DESC LIMIT 0,5';
$run=mysqli_query($conn,$query);
while($row=mysqli_fetch_array($run)){
$img=$row['src'];
$title=$row['title'];
?>
<table class='mobileTable'>
<tr> <td><img src='<?php echo $img ?>' onerror='imgError(this)' /></td></tr>
<tr> <td  class='mobMidTitle'><?php echo $title ?></td></tr>//i want to remove this title as well
</table>
<?php } ?>
<script>
function imgError(image) {
image.onerror = "";
image.src = "http://localhost/domain/images/error.jpg";
document.getElementById('tit').style.display='none';
return true;
}</script>

上面的代码将从数据库中获取 5 个图像，使用 JavaScript 我可以将图像更改为错误.jpg但我想删除图像及其仅失败图像的标题。

Answer 1

您可以通过以下两种方式之一完成此操作：

要么使用 removeChild 函数(假设你想删除元素而不是隐藏它们)：

function imgError(image) {
// Get image row
var imageRow = image.parentNode.parentNode;
// Get image label row
var imageLabel = imageRow.nextElementSibling;
// Get table element of that image row and remove imageLabel
imageRow.parentNode.removeChild(imageLabel);
// Get table element of that image row and remove img element
imageRow.parentNode.removeChild(imageRow);
}

或者，您可以使用图像和标签元素的.style.visibility属性隐藏元素：

function imgError(image) {
// Get image row
var imageRow = image.parentNode.parentNode;
// Get image label row
var imageLabel = imageRow.nextElementSibling;
// Hide imageLabel
imageRow.style.visibility = 'hidden';
// Hide imageRow
imageLabel.style.visibility = 'hidden';
}

Answer 2

好吧，有多种方法可以做到这一点：

在这里，我假设你想使用Pure javescript - no jquery- 并保持原始的DOM文档层次结构。

<table class='mobileTable'>
<tr> <td><img src='path/to/broken/image.jpg' onerror='imgError(this)' /></td></tr>
<tr> <td  class='mobMidTitle'>some title</td></tr>
</table>
<script>
function imgError(image) {
// this will step up to get the parent of the image's parent
var imgParent = image.parentElement.parentElement;
// this will get the next sibling of the image grandpa
var nextSib = imgParent.nextElementSibling;
// reset it's html to empty
nextSib.innerHTML = '';
image.onerror = "";
image.src = "http://localhost/domain/images/error.jpg";
return true;
}
</script>

另一种更简单的方法是将新 ID 添加到标题TD，然后使用 JavaScript 将其删除，如下所示：

/* here we've added id='mobMidTitle' */
<td  class='mobMidTitle' id='mobMidTitle' >some title</td>
<script>
function imgError(image) {
image.onerror = "";
image.src = "http://localhost/domain/images/error.jpg";
document.getElementById('mobMidTitle').style.display = 'none';
//                       ^^^^^^^^^^^
return true;
}
</script>

Answer 3

这个JQuery javascipt(https://jquery.com)隐藏任何加载失败的图像怎么样：

$("img").error(function() { $(this).hide(); });

或者，如果要隐藏其容器，可以执行以下操作：

$("img").error(function() { $(this).parent().hide(); });

或者，如果您确实要删除图像或容器，请使用remove()而不是hide().

您还可以显示自己的错误图像：

$("img").error(function() { $(this).attr("src","error.png"); });

代码已经过测试，并且可以工作。

您可以通过仅选择要隐藏或删除的图像来使其更具体。将$("img")更改为$(".hideOnError")，并对要隐藏或删除的图像使用类hideOnError。可以采取不同的行动，例如replaceOnError.您也可以将其应用于其他可加载元素。

在特定情况下，当映像失败时，要删除两个元素。最好的方法是通过属性将标题与图像相关联：

<table class='mobileTable'>
<tr><td><img id='image1' src='<?php echo $img ?>'></td></tr>
<tr><td id='image1title' class='mobMidTitle'><?php echo $title ?></td></tr>
</table>

如您所见，此处图像的 id 是image1，包含标题的表格单元格具有idimage1title。若要在错误时删除图像和标题，同时保持表结构不变，请执行以下操作：

$("img").error(function() { 
var id = $(this).attr('id');     // get id of image
$(this).remove();                // remove image
$("#"+id+"title").empty();       // remove title
});

Answer 4

如果 img 标签的图像损坏，您可以替换图像。请检查以下代码

<img src='brokenimage.jpg' onError="ImageError(this);">
<script language="JavaScript">
function ImageError(img)
{
img.src = "https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png";
}
</script>