JS设置img的src|极客笔记

JS设置img的src

在网页开发中，经常会遇到需要通过JavaScript动态设置图片的src属性的情况。这在一些特定场景下非常有用，比如在用户交互时根据不同的条件加载不同的图片，或者是在后台数据返回时动态展示图片等。本文将详细介绍如何通过JavaScript来设置img标签的src属性。

1. 通过getElementById获取img元素

首先，我们需要在HTML中设置一个img标签，给它一个id以便于在JavaScript中获取到。下面是一个简单的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Set img src with JavaScript</title>
</head>
<body>
    <img id="myImg" src="placeholder.jpg" alt="Placeholder Image">
</body>
</html>

在这个示例中，我们设置了一个id为myImg的img标签，并给它一个默认的src属性placeholder.jpg。接下来，我们将使用JavaScript来动态修改这个图片的src属性。

const img = document.getElementById('myImg');
img.src = 'newImage.jpg';

在这段JavaScript代码中，我们首先通过document.getElementById('myImg')获取到了id为myImg的img元素，然后将其src属性设置为newImage.jpg。这样就完成了动态修改图片src属性的操作。

2. 通过querySelector选择img元素

除了通过getElementById获取img元素外，我们还可以通过querySelector来选择img元素。querySelector是一种更灵活的选择器，可以选择所有类型的元素，而不仅仅是id为myImg的元素。下面是一个示例：

const img = document.querySelector('img');
img.src = 'newImage.jpg';

在这个示例中，我们使用document.querySelector('img')选择了第一个出现的img元素，并将其src属性设置为newImage.jpg。这种方法在需要选择多个img元素时非常有用。

3. 通过class选择器选择img元素

除了通过id和标签名选择img元素外，我们还可以通过class选择器选择img元素。这种方法可以选择具有相同class的所有img元素，并对它们进行操作。下面是一个示例：

<body>
    <img class="myImages" src="image1.jpg" alt="Image 1">
    <img class="myImages" src="image2.jpg" alt="Image 2">
    <img class="myImages" src="image3.jpg" alt="Image 3">
</body>

const images = document.querySelectorAll('.myImages');
images.forEach(img => {
    img.src = 'newImage.jpg';
});

在这个示例中，我们首先定义了三个具有相同class的img元素，然后使用document.querySelectorAll('.myImages')选择了所有具有myImages类的img元素，并将它们的src属性依次设置为newImage.jpg。这种方法可以方便地对一组相同类型的元素进行操作。

4. 异步加载图片

有时候我们需要在用户执行某些操作后才加载图片，这时就需要使用异步加载的方法。下面是一个示例：

const img = document.getElementById('myImg');

function loadNewImage() {
    return new Promise((resolve, reject) => {
        const newImg = new Image();
        newImg.onload = () => {
            img.src = newImg.src;
            resolve();
        };
        newImg.onerror = () => {
            reject();
        };
        newImg.src = 'newImage.jpg';
    });
}

loadNewImage().then(() => {
    console.log('New image loaded successfully');
}).catch(() => {
    console.error('Failed to load new image');
});

在这个示例中，我们定义了一个loadNewImage函数，该函数返回一个Promise对象。在Promise对象的resolve方法中，我们将新图片的src属性赋值给原来的图片元素，并在then方法中输出成功信息。在reject方法中，我们输出加载失败的信息。这种方法可以保证在图片加载完成后再将其赋值给img元素。

通过上面的方法，我们可以在网页中动态设置img标签的src属性，实现图片的异步加载以及根据条件加载不同的图片等功能。这些方法对于提升用户体验和网页性能非常有帮助。