未加载图像时如何在html中的img标签中设置默认图像文本和标题

Question

无图片加载时如何设置默认img

<img src="imggirl.jpg">

Answer 1

如果你只想显示替代文本，那么你可以这样做。

<img src="imggirl.jpg" alt="girl image">

如果你想用默认图像替换图像，那么你可以这样做。

function imageExists(image_url){

    var http = new XMLHttpRequest();

    http.open('HEAD', image_url, false);
    http.send();

    return http.status != 404;
}

const imageElement = document.getElementById('image');

if (imageExists('https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png')) {
  imageElement.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png';
}

<img src="https://www.talkwalker.com/images/2020/blog-headers/image-analysis.png" id="image">

Answer 2

你可以试试这个

<img src="imggirl.jpg" alt="girl_image" title="Image">

Answer 3

您可以使用替代文本的缩写“alt”属性来声明图像的替代文本 前任：