イメージタグ内のテキストのみを表示html

Question

イメージがパスにない場合は、代替テキストのみを表示します。それはFirefoxで正しく表示されていますが、クロムには壊れた画像リンクと代替テキストが表示されます。私はjqueryの

<script type="text/javascript"> 
    function hideImage(img) 
{ 
    img.style.display = "none"; 
} 
</script> 

を試してみました。この

ようにすることを試みたが、それもaltテキストは表示されません。これによってaltテキストを表示する方法。

Answer 1

img要素の読み込みに失敗したときに発生するerrorイベントにフックできます。 replaceWith()に電話すると、altというテキストが表示されます。これを試してみてください：

$('img').on('error', function() { 
 
    $(this).replaceWith(function() { 
 
    return $(this).prop('alt'); 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Here's an image that won't load: <img src="doesnt_exist.jpg" alt="foo bar" />

Answer 2

CSSソリューションを - attr()表現を使用して、古いブラウザ

---

に互換性がない場合があります。表示されるデフォルトの代替テキストを置き換えることができます。デフォルトのテキストの上に擬似要素を配置し、それを表示から隠すことができます。

img:after { 
 
    content: attr(alt); 
 
    font-size: 16px;  
 
    color: rgb(100, 100, 100); 
 
    display: block; 
 
    position: absolute; 
 
    z-index: 2; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: #fff; 
 
}

<img src="doesnt_exist.jpg" alt="No Image" />

クレジットStyling Broken Imagesに多くのクールなトリックがあります。