怎么更换img的src

有多种方法可以更换img标签的src属性,以下是常用的方法：

使用 JavaScript 原生方法

通过元素对象

// 获取img元素
const img = document.getElementById('myImage');
// 更换src
img.src = 'new-image.jpg';

通过类名或选择器

// 通过类名获取
const img = document.querySelector('.my-image');
img.src = 'new-image.jpg';
// 通过CSS选择器
const img = document.querySelector('img[src="old-image.jpg"]');
img.src = 'new-image.jpg';

使用 jQuery

// jQuery方式
$('#myImage').attr('src', 'new-image.jpg');
// 或者
$('.my-image').prop('src', 'new-image.jpg');

动态更换（带加载状态）

const img = document.getElementById('myImage');
// 显示加载中
img.src = 'loading.gif';
// 等待图片加载完成后再替换
img.onload = function() {
    this.src = 'new-image.jpg';
};
// 错误处理
img.onerror = function() {
    this.src = 'error-image.jpg';
};

批量更换多个图片

// 更换所有img标签的src
const images = document.querySelectorAll('img');
images.forEach(img => {
    img.src = 'new-image.jpg';
});
// 或者根据条件更换
const images = document.querySelectorAll('img[data-type="banner"]');
images.forEach(img => {
    img.src = 'new-banner.jpg';
});

实用示例：轮播图效果

<img id="carousel" src="image1.jpg" alt="Carousel">
<button onclick="changeImage(1)">图片1</button>
<button onclick="changeImage(2)">图片2</button>
<button onclick="changeImage(3)">图片3</button>
<script>
function changeImage(index) {
    const img = document.getElementById('carousel');
    img.src = `image${index}.jpg`;
}
</script>

注意事项：

• ✅ 建议使用onload和onerror事件处理加载状态
• ✅ 如果图片路径是相对路径，请确保路径正确
• ✅ 可以使用data-src属性存储原始路径，避免重复请求
• ✅ 对于大量图片，考虑使用懒加载技术

哪种方式最适合你的需求？