如何在 JavaScript/jQuery 中更改 img 元素的 src 属性？

介绍

在网页开发中，我们经常需要动态地更改图片的展示。通过更改 img 元素的 src 属性，可以实现图片切换、懒加载等效果。

JavaScript

通过 DOM 操作更改

// 获取 img 元素
const img = document.querySelector('img');

// 更改 src 属性
img.src = 'new-image-url.jpg';

通过 document.querySelector 方法获取到需要操作的 img 元素，然后通过 .src 属性直接对其进行更改。

通过属性选择器更改

// 获取 img 元素并设置新的 src 属性值
document.querySelector('img[src="old-image-url.jpg"]').setAttribute('src', 'new-image-url.jpg');

通过属性选择器获取需要更改的 img 元素，然后使用 .setAttribute 方法给其设置新的 src 属性值。

jQuery

通过 attr 方法更改

// 获取 img 元素并设置新的 src 属性值
$('img').attr('src', 'new-image-url.jpg');

通过 $ 函数获取需要操作的 img 元素，然后使用 .attr 方法给其设置新的 src 属性值。

通过 attr 选择器更改

// 获取 img 元素并设置新的 src 属性值
$('img[src="old-image-url.jpg"]').attr('src', 'new-image-url.jpg');

通过 attr 选择器获取需要更改的 img 元素，然后使用 .attr 方法给其设置新的 src 属性值。

总结

无论是通过 JavaScript 还是 jQuery，更改 img 元素的 src 属性都是十分简单的。只需要对其进行操作即可实现图片的动态更改。