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我可以将图像更改为error.jpg但我想删除图像以及仅图像失败的图像。

Answer 1

这个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，包含标题的表格单元格为 id image1title。要在出错时删除图像和标题，同时保持表格结构不变，请执行以下操作：

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

Answer 2

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

使用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 3

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

这里，我假设您要使用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>

另一种更简单的方法是在标题TD中添加新ID，然后使用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 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>

如果图像被破坏，请删除图像及其容器

4 个答案: