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

이미지를 찾을 수없는 경우 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';">

---

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

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

---

여기에 이미지 이름을 잘못 입력 한 코드 스 니펫을 확인하십시오. 따라서 대체 이미지를 찾을 수없는 이미지 (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대신.

---

이미지 주위에 부모 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>

---

사용해보십시오 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";
}

---

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

---

이미지가 깨지면 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" />

모두 감사합니다.

참고 URL : https://stackoverflow.com/questions/7995080/html-if-image-is-not-found