更改图像 src 的方法

在前端开发中，经常需要在网页中动态更改图像的路径。本文将介绍如何使用 jQuery 和 Javascript 来更改图像 src。

1. jQuery 方法

使用 jQuery 来更改图像 src 很简单，只需使用 attr() 方法即可。

$('#img').attr('src', 'new/path/to/image.jpg');

上述代码中，#img 是指要修改的图片的 CSS 选择器，src 是要修改的属性名称，new/path/to/image.jpg 是新的图片路径。

2. Javascript 方法

使用 Javascript 更改图像 src 的方法也很简单，只需使用 getElementById() 方法即可。

document.getElementById('img').src = 'new/path/to/image.jpg';

上述代码中，img 是要修改的图片的 id，src 是要修改的属性名称，new/path/to/image.jpg 是新的图片路径。

需要注意的是，使用 Javascript 方法修改图片路径时，必须先等待图片加载完成后才能修改，否则会导致图片无法显示。可以使用 onload 事件来实现图片加载完成后执行代码的功能。

var img = document.getElementById('img');
img.onload = function() {
  img.src = 'new/path/to/image.jpg';
};
img.src = 'old/path/to/image.jpg';

上述代码中，首先创建一个 img 对象，并定义 onload 事件回调函数。然后设置 img 对象的 src 属性为旧的图片路径，这样图片就开始加载了。当图片加载完成时，onload 事件回调函数会被触发，其中可以修改图片的 src 属性为新的图片路径。

总结

以上就是使用 jQuery 和 Javascript 更改图像 src 的方法。使用 jQuery 更方便，但使用 Javascript 也很简单。在实际开发中，可以根据需要选择合适的方法。