이미지를 찾을 수없는 경우 HTML

HTML 페이지에 이미지가 있습니다.

<img src="smiley.gif" alt="Smiley face" width="32" height="32" />

서버에서 이미지를 찾을 수없는 경우보기 흉한 빈 사각형이 표시됩니다.

이미지가 발견되지 않으면 서버에 확실히있는 다른 기본 이미지 나 아무것도 표시하지 않도록 만들고 싶습니다.

어떻게 할 수 있습니까?

문제를 해결하는 가장 좋은 방법 :

<img id="currentPhoto" src="SomeImage.jpg" onerror="this.onerror=null; this.src='Default.jpg'" alt="" width="100" height="120">

onerror 당신에게 좋은 것입니다 :)

이미지 파일 이름을 변경하고 직접 시도하십시오.

그럼 당신은 이것을 시도 할 수 있습니다.

  <object data="URL_TO_Default_img.png" type="image/png">
   <img src="your_original_image.png" />
  </object>

이것은 나를 위해 일했습니다. 당신에 대해 알려주세요.

좋아,하지만 나는 이런 식으로 사용하는 것을 좋아한다. 그래서 원본 이미지를 사용할 수 없을 때마다 당신이 가장 좋아하는 스마일 리나 미안하다고 말하는 이미지가 될 수있는 기본 이미지를로드 할 수있다. 사용할 수 없지만 두 이미지가 모두 누락 된 경우 텍스트를 사용하여 표시 할 수 있습니다. 당신도 웃을 수 있습니다. 거의 모든 경우를 커버합니다.

<img src="path_to_original_img/img.png"  alt="Sorry! Image not available at this time" 
       onError="this.onerror=null;this.src='<?=base_url()?>assets1/img/default.jpg';">

여기에 이미지 이름을 잘못 입력 한 코드 스 니펫을 확인하십시오. 따라서 대체 이미지를 찾을 수없는 이미지 (404.svg)로 표시합니다.

<img id="currentPhoto" src="https://www.ccrharrow.org/Images/content/953/741209.pg" onerror="this.src='https://www.unesale.com/ProductImages/Large/notfound.png'" alt="">

이 시나리오를 처리하는 일반적인 방법은 alt태그를 의미있는 것으로 설정하는 것입니다.

대신 기본 이미지를 원하는 경우 다음과 유사한 형식을 사용하여 호출하는 서버 측 기술을 사용하여 이미지를 제공하는 것이 좋습니다.

<img src="ImageHandler.aspx?Img=Blue.jpg" alt="I am a picture" />

에서 ImageHandler.aspx코드, 어떤 파일 찾을 수 없다는 오류를 포착하고 최대 역할을 default.jpg대신.

다음을 추가하여 대체 텍스트를 표시 할 수 있습니다 alt.

<img src="my_img.png" alt="alternative text" border="0" /> 

이미지 주위에 부모 div를 추가하고 다음 onerror 이벤트 핸들러를 사용하여 원본 이미지를 숨겼습니다. IE에서는 alt 속성을 사용한 후에도 여전히 못생긴 이미지를 찾을 수없는 이미지가 표시 되었기 때문입니다.

<div style=" width:300px; height:150px; float:left; margin-left:5px; margin-top:50px;">
        <img src='@Url.Content("~/Images/Logo-Left.png")' onerror="this.parentElement.innerHTML = '';" />
</div>

대안으로, 이미지가 존재하지 않는 경우-아무것도 표시하지 않습니다. (내가 찾던 것)

"onerror"속성에있는 Robby Shaw의 답변에서 "this.remove ()"로 함수를 바꿀 수 있습니다.

<img id="currentPhoto" src="SomeImage.jpg" alt='1' width="100" height="120">
<img id="currentPhoto" src="SomeImage.jpg" onerror="this.onerror=null; this.remove();" alt="2" width="100" height="120">

사용해보십시오 border=0에 img추악한 광장 멀리 갈 수 있도록 태그입니다.

<img src="someimage.png" border="0" alt="some alternate text" />

나는 <img>태그가 차지하는 공간을 숨기고 싶었 기 때문에 이것이 나를 위해 일했습니다.

<img src = "source.jpg" alt = "" >

텍스트 대신 대체 이미지를 원하면 php를 사용할 수도 있습니다.

$file="smiley.gif";
$alt_file="alt.gif";
if(file_exist($file)){
     echo "<img src='".$file."' border="0" />";
}else if($alt_file){
     // the alternative file too might not exist not exist
     echo "<img src='".$alt_file."' border="0" />";
}else{
  echo "smily face";
}

이를 처리하는 간단한 방법은 배경 이미지를 추가하는 것입니다.

PHP 사용해보기

if (file_exists('url/img/' . $Image)) {
    $show_img_URL = "Image.jpg";
} else {
    $show_img_URL = "Image_not_found.jpg";
}

이미지가 깨지면 alt 속성을 사용하지 않으려면이 코드를 사용하고 그에 따라 설정할 수 있습니다.

<h1>
  <a> 
   <object data="~/img/Logo.jpg" type="image/png">
     Your Custom Text Here
   </object>
  </a>
</h1>

이것은 나를 위해 일했습니다. srcset 사용. 나는 그것에 대해 방금 배웠으므로 브라우저가 지원하는지 모르겠지만 나를 위해 일했습니다. 시도하고 나중에 피드백을주세요.

 <img src="smiley.gif" srcset="alternatve.gif" width="32" height="32" />

솔루션-img의 높이와 너비 요소를 제거한 다음 대체 텍스트가 작동했습니다.

<img src="smiley.gif" alt="Smiley face" width="32" height="32" />

에

<img src="smiley.gif" alt="Smiley face" />

다들 감사 해요.