IT TIP

주어진 URL로 이미지가 있는지 확인하는 방법은 무엇입니까?

itqueen 2020. 10. 16. 19:17
반응형

주어진 URL로 이미지가 있는지 확인하는 방법은 무엇입니까?


jquery를 사용하여 이미지가 있는지 확인하고 싶습니다.

예를 들어이 이미지가 있는지 어떻게 확인합니까?

http://www.google.com/images/srpr/nav_logo14.png 

수표는 나에게 200 또는 상태 ok를 제공해야합니다.

-------------- 편집 됨 -------------------

var imgsrc = $(this).attr('src');
var imgcheck = imgsrc.width;


if (imgcheck==0) {
alert("You have a zero size image");
} else { //do rest of code }

감사합니다 진


다음 error과 같이 핸들러를 사용하십시오 .

$('#image_id').error(function() {
  alert('Image does not exist !!');
});

이미지를로드 할 수없는 경우 (예 : 제공된 URL에 존재하지 않기 때문에) 경고가 표시됩니다.

최신 정보:

나는 다음을 사용한다고 생각한다.

$.ajax({url:'somefile.dat',type:'HEAD',error:do_something});

404를 확인하기에 충분합니다.

더 많은 자료 :

업데이트 2 :

코드는 다음과 같아야합니다.

$(this).error(function() {
  alert('Image does not exist !!');
});

이 줄이 필요 없으며 원격 파일이 존재하는지 여부를 확인하지 않습니다.

var imgcheck = imgsrc.width;    

if (imgcheck==0) {
  alert("You have a zero size image");
} else { 
  //execute the rest of code here 
}

$.ajax({
    url:'http://www.example.com/somefile.ext',
    type:'HEAD',
    error: function(){
            //do something depressing
    },
    success: function(){
            //do something cheerful :)
    }
});

에서 : http://www.ambitionlab.com/how-to-check-if-a-file-exists-using-jquery-2010-01-06


존재하지 않는 경우 기본 이미지로드 또는 오류 처리

$('img[id$=imgurl]').load(imgurl, function(response, status, xhr) {
    if (status == "error") 
        $(this).attr('src', 'images/DEFAULT.JPG');
    else
        $(this).attr('src', imgurl);
    });

사용 사례

$('#myImg').safeUrl({wanted:"http://example/nature.png",rm:"/myproject/images/anonym.png"});

API :

$.fn.safeUrl=function(args){
  var that=this;
  if($(that).attr('data-safeurl') && $(that).attr('data-safeurl') === 'found'){
        return that;
  }else{
       $.ajax({
    url:args.wanted,
    type:'HEAD',
    error:
        function(){
            $(that).attr('src',args.rm)
        },
    success:
        function(){
             $(that).attr('src',args.wanted)
             $(that).attr('data-safeurl','found');
        }
      });
   }


 return that;
};

참고 : rm여기서는 위험 관리를 의미합니다.


다른 사용 사례 :

$('#myImg').safeUrl({wanted:"http://example/1.png",rm:"http://example/2.png"})
.safeUrl({wanted:"http://example/2.png",rm:"http://example/3.png"});
  • ' http://example/1.png': 존재하지 않는 경우 ' http://example/2.png'

  • ' http://example/2.png': 존재하지 않는 경우 ' http://example/3.png'


에서 여기 :

// when the DOM is ready
$(function () {
  var img = new Image();
  // wrap our new image in jQuery, then:
  $(img)
    // once the image has loaded, execute this code
    .load(function () {
      // set the image hidden by default    
      $(this).hide();
      // with the holding div #loader, apply:
      $('#loader')
        // remove the loading class (so no background spinner), 
        .removeClass('loading')
        // then insert our image
        .append(this);
      // fade our image in to create a nice effect
      $(this).fadeIn();
    })
    // if there was an error loading the image, react accordingly
    .error(function () {
      // notify the user that the image could not be loaded
    })
    // *finally*, set the src attribute of the new image to our image
    .attr('src', 'images/headshot.jpg');
});

jQuery 3.0이 제거되었습니다 .error . 올바른 구문은 이제

$(this).on('error', function(){
    console.log('Image does not exist: ' + this.id); 
});

참고 URL : https://stackoverflow.com/questions/3381663/how-to-check-if-image-exists-with-given-url

반응형