이미지가 엑박일때 div를 없애고싶습니다.

<div><img src="<?php echo $content->attach->file1[0]; ?>" alt="<?php echo $content->attach->file1[1]; ?>"></div>
<div><img src="<?php echo $content->attach->file2[0]; ?>" alt="<?php echo $content->attach->file2[1]; ?>"></div>
<div><img src="1.jpg"></div>

안녕하세요 현재 첨부파일의 url값을 불러와서 div에 앉혀두는 작업을 하였습니다.

그런데 3번째인 1.jpg는 주소안에 이미지가 없어 엑박이 뜨게됩니다.

<div><img src="1.jpg"></div> 이런식으로 되어있지만

이미지가 엑박이기때문에 div를 삭제하게 하고싶습니다 어떤 방법이 있을까요?

워드프레스 에러 기술지원 서비스 전문가에게 맡기세요
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
  • 안녕하세요~^^

    아래와 같은 코드를 적용해보시겠어요?

    <div><img src="1.jpg" onerror="this.parentNode.style.display='none'"></div>

    자세한 내용은 아래의 링크들을 참고해보세요.

    https://www.w3schools.com/jsref/event_onerror.asp

    https://www.w3schools.com/jsref/prop_node_parentnode.asp

    고맙습니다.

  • 다른 플러그인의 스크립트 파일에서 추가하고 있다면

    저희 쪽에서 도움을 드리기 어려우니 직접 찾아서 수정해주셔야 할 듯합니다.

    고맙습니다.

  • 콘솔창에 test가 나오고있습니다!

    스크립트는 정상작동중으로 확인되었습니답

  • 안녕하세요.

    아래의 코드처럼 console.log에 임의의 문자를 출력해보시겠어요?

    <script>
    jQuery(document).ready(function(){
    	jQuery('#kboard-document img').each(function(){
    		var img = jQuery(this);
    		jQuery.get(img.attr('src')).fail(function(){
    			console.log('Test');
    			jQuery(img).parent('div').remove();
    		});
    	});
    });
    </script>

    크롬 브라우저의 개발자 도구(F12키) -> 콘솔(Console)에 'Test'가 출력되는지 확인해보세요.

    만약 출력이 되지 않는다면 스크립트가 정상적으로 작동하지 않는 문제입니다.

    고맙습니다.

  • 제가 잘 몰라서 그런거같기는한데..

    추가한 모든 스크립트코드를 삭제하고 진행하였으나

    첨부파일을 추가하지않은 3번째 div가 살아있습니다.

     

    현재 왠만한 플러그인은 비활성화 하였습니다.

    코드는 정상작동하여 div가 보이지않고 height값도 0으로 차지하고있으나

    콘솔창에서 3번째 div가 살아있음이 보입니다.

     

    주소는 http://winos1.cafe24.com/?page_id=717&uid=65&mod=document&pageid=1#kboard-document 입니다.

    왼쪽에 작은 썸네일 div가 3개인데요 2개만 보이고 하나는 콘솔창에서만 살아있습니다.

    다만 slick slider 플러그인 사용시에는 비어있는 이 div를 인식하여 빈화면이나오는 문제가 생깁니다.

     

    다 안짜주셔도됩니다.. 알려주시면 최대한 찾아보고 적용하겠습니다!

    감사합니다.

  • 직접 추가한 다른 스크립트 코드에서 에러가 발생하고 있기 때문에,

    알려드린 코드가 실제로 동작하고 있는지 모르겠군요.

    워드프레스에서 제이쿼리를 사용하시려면 $() 이렇게 사용하시면 안됩니다.

    jQuery() 이렇게 사용하셔야 합니다.

    $ 특수문자로된 스크립트 코드를 찾아서 jQuery 로 변경해주세요.

    그리고 스크립트 코드에 에러가 있는지 확인하시려면 브라우저의 개발자 도구(F12키)에서 Console을 확인하시면 됩니다.

    고맙습니다.

  • 글쎄요.

    테스트해봤지만 정상적으로 div 태그를 삭제하는걸 확인했습니다.

    div 안의 내용을 지우는게 아니라 div 태그를 지우게됩니다.

    확인 가능한 페이지 주소도 알려주세요~

    고맙습니다.

  • <script>
    jQuery(document).ready(function(){
    	jQuery('#kboard-document img').each(function(){
    		var img = jQuery(this);
    		jQuery.get(img.attr('src')).fail(function(){
    			jQuery(img).parent('div').remove();
    		});
    	});
    });
    </script>

    음..

    #kboard-document 안에있는 모든 img가

    이미지를 가져오지 못할때 div를 선택하여 삭제한다. 

    로 해석하였습니다.

    그러나 현재는 img가 없는 div를 대상으로 div안의 내용을 지우는것 같습니다.

     

    현재 코드삽입하였으나 삭제가 되지않고있습니다.

    이유를 알 수 있을까요?

  • .remove() 메소드를 사용하시면 어떨까 합니다.

    <script>
    jQuery(document).ready(function(){
    	jQuery('#kboard-document img').each(function(){
    		var img = jQuery(this);
    		jQuery.get(img.attr('src')).fail(function(){
    			jQuery(img).parent('div').remove();
    		});
    	});
    });
    </script>

     

    .remove() 메소드는 아래 링크를 참고해주세요.

    https://api.jquery.com/remove/

    고맙습니다.

  • display:none적용은 잘 되지만 div가 있어 슬라이드시에 공백이 나옵니다.

    						<div><img src="<?php echo $content->attach->file1[0]; ?>" alt="<?php echo $content->attach->file1[1]; ?>" onerror="this.parentNode.style.display='none'"></div>
    						<div><img src="<?php echo $content->attach->file2[0]; ?>" alt="<?php echo $content->attach->file2[1]; ?>" onerror="this.parentNode.style.display='none'"></div>
    						<div><img src="<?php echo $content->attach->file2[0]; ?>" alt="<?php echo $content->attach->file3[1]; ?>" onerror="this.parentNode.style.display='none'"></div>

    이렇게 적용을 해보았습니다.

    다만 slick slider플러그인을 사용중에 있는데요 코드는 정상적으로 작동하지만 이미 불러온 후 삭제하는 과정에서 slick slider가 몇개의 div를 생성해냅니다.

    이런경우에는 어떤 방법들이 있을까요?

    http://winos1.cafe24.com/?page_id=717&uid=65&mod=document&pageid=1#kboard-document

    주소입니다 위아래 버튼을 클릭하다보면 흰 배경화면이 나옵니다

  • 안녕하세요~^^

    마지막 태그는 프로그램 코드가 없는데요.

    직접 파일을 편집해서 추가 하셨는지요?

    이런 경우는 직접 다시 파일을 편집해주시는게 가장 좋을 듯합니다.

     

    스킨의 document.php 파일 하단에 아래 코드를 추가해서 테스트 해보시겠요?

    이미지가 실제로 서버에 있는지 확인해서 없다면 div 태그를 숨기는 자바스크립트 코드입니다.

    <script>
    jQuery(document).ready(function(){
    	jQuery('#kboard-document img').each(function(){
    		var img = jQuery(this);
    		jQuery.get(img.attr('src')).fail(function(){
    			jQuery(img).parent('div').hide();
    		});
    	});
    });
    </script>

    고맙습니다.

  • onerror="this.parentNode.remove(parentNode)"

    로 해결하였습니다!!!

    필요하신분들 많이 이용했으면 합니다~!!

    (div안에 이미지가 없을때 div를 삭제함)

     

    케이보드 항상 감사드립니다.

워드프레스 에러 기술지원 서비스 전문가에게 맡기세요