크롬에서 이미지의 대체 텍스트를 표시하는 방법

크롬에서 이미지의 대체 텍스트를 표시하는 방법

---

잘못된 소스가있는 이미지는 Firefox에서 대체 텍스트를 표시하지만 이미지 너비를 조정하지 않는 한 크롬에서는 표시하지 않습니다.

  <img height="90" width="90"
    src="http://www.google.com/intl/en_ALL/images/logos/images_logo_lg.gif"
    alt="Image Not Found"/>

이미지의 대체 텍스트를 표시하는 방법은 무엇입니까?

---

내가 올바른 해요 경우,이 (에 따라 웹킷 버그가 이 ). 할 수있는 일이 많을 지 모르겠지만 대답이 약해서 죄송합니다.

그러나 사용할 수있는 해결 방법이 있습니다. title이미지에 속성을 추가하면 (예 title="Image Not Found":) 작동합니다.

---

title속성을 사용할 수 있습니다 .

<img height="90" width="90"
src="http://www.google.com/intl/en_ALL/images/logos/images_logo_lg.gif"
alt="Google Images" title="Google Images" />

---

예, 웹킷의 문제이며 크롬에서도보고되었습니다. http://code.google.com/p/chromium/issues/detail?id=773 2008 년부터 있습니다 ... 아직 해결되지 않았습니다 !!

이 문제를 해결하기 위해 javacsript와 jQuery를 사용하고 있습니다.

function showAlt(){$(this).replaceWith(this.alt)};
function addShowAlt(selector){$(selector).error(showAlt).attr("src", $(selector).src)};
addShowAlt("img");

일부 이미지 만 원하는 경우 :

addShowAlt("#myImgID");

---

alt 대신 제목 속성 사용

<img
  height="90"
  width="90"
  src="http://www.google.com/intl/en_ALL/images/logos/images_logo_lg12.gif"
  title="Image Not Found"
/>

---

다음은 jQuery의 간단한 해결 방법입니다. 사용자 스크립트로 구현하여 보는 모든 페이지에 적용 할 수 있습니다.

$(function () {
  $('img').live('mouseover', function () {
    var img = $(this); // cache query
    if (img.title) {
      return;
    }
    img.attr('title', img.attr('alt'));
  });
});

또한 이것을 alt 라는 Chrome 확장 프로그램으로 구현했습니다 . 을 사용하기 때문에 jQuery.live동적으로로드 된 콘텐츠에서도 작동합니다. 이 확장 프로그램을 사용 중지하고 Chrome 스토어에서 제거했습니다.

---

다양한 브라우저 (잘못된)가이를 다양한 방식으로 처리합니다. 제목 속성이 마우스 오버 효과이기 때문에 제목 (이전 IE '표준')을 사용하는 것은 특히 적절하지 않습니다. 위의 jQuery 솔루션 (Alexis)은 올바른 방향으로 보이지만 '오류'가 잡힐 수있는 지점에서 발생한다고 생각하지 않습니다. src를 자체로 바꾸고 오류를 포착하여 성공했습니다.

$('img').each(function()
{
    $(this).error(function()
    {
        $(this).replaceWith(this.alt);
    }).attr('src',$(this).prop('src'));
});

이것은 Alexis 기여에서와 같이 누락 된 이미지 이미지를 제거하는 이점이 있습니다.

---

Internet Explorer 7 (및 이전 버전)은 이미지 위에 마우스를 놓으면 도구 설명으로 alt 속성 값을 표시합니다. HTML 사양에 따르면 이것은 올바른 동작이 아닙니다. 대신 제목 속성을 사용해야합니다. 출처 : http://www.w3schools.com/tags/att_img_alt.asp

---

누락 된 이미지의 대체 텍스트를 표시하려면 이와 같은 스타일을 추가해야합니다. 나는 이것을 위해 추가 자바 스크립트를 추가 할 필요가 없다고 생각합니다.

.Your_Image_Class_Name {
  font-size: 14px;
}

그것은 나를위한 일입니다. 즐겨!!!!

---

태그에 제목 속성을 넣을 수 있습니다.

<img src="smiley.gif" title="Smiley face" width="42" height="42">

---

나는 이것을 사용, 그것은 PHP와 함께 작동합니다 ...

<span><?php
if (file_exists("image/".$data['img_name'])) {
  ?>
  <img src="image/<?php echo $data['img_name']; ?>" width="100" height="100">
  <?php
}else{
  echo "Image Not Found";
}>?
</span>

Essentially what the code is doing, is checking for the File. The $data variable will be used with our array then actually make the desired change. If it isn't found, it will throw an Exception.

참고URL : https://stackoverflow.com/questions/5386570/how-to-display-alt-text-for-an-image-in-chrome