javascript - 在 jquery 中检查图像源是否有图像

Question

当图像源有图像(来自服务器端的图像)时，我需要隐藏 div 如果没有图像需要在 jquery 中隐藏 div

这是我的html文件

<div class="form-group bc-my-group">
     <label>Photo Upload</label>
     <div class="input-group image-preview">
         <input id="imageToUpload" class="form-control image-preview-filename" type="file" accept="image/png, image/jpeg, image/gif" name="images" />
         <div class="help-block with-errors"></div>
     </div>
</div>
<div class="form-group bc-my-group">
     <label>My Photo</label>
     <div id="prof_image">
          <img src ="{{ asset($profile) }}">
     </div>
</div>

任何人都可以给我一个想法来获得这个吗？？

Answer 1

You can use the onerror event in JavaScript to act when an image fails to load:

 var img = document.getElementById("myImg");
    img.onerror = function () { 
        this.style.display = "none";
    }

In jQuery (since you asked):

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

Or for all images:

$("img").error(function () { 
    $(this).hide();
    // or $(this).css({visibility:"hidden"}); 
});

如果隐藏图像可能会改变布局，您应该使用 visibility: hidden 而不是 .hide() 。网络上的许多网站都使用默认的“无图像”图像，当指定的图像位置不可用时，将 src 属性指向该图像。

for your solution just use this

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