通过定位img元素并访问其src属性，我们可以查看并更改该属性。

1. 原生JavaScript方法：

使用元素.setAttribute()来更改属性，它接受两个参数，第一个是属性名称，第二个是属性值。使用元素.getAttribute()传入属性名称，可以获得该属性的值。

举个例子：假设我们有一个HTML页面，其中包含一张图片和一个按钮。我们可以通过原生JavaScript来更改图片的src属性。首先获取img元素，然后使用setAttribute()方法更改src属性的值。例如，我们可以将图片的src属性从"6.jpg"更改为"7.jpg"，从而实现更换图片的目的。同样地，我们还可以使用getAttribute()方法来获取img元素的src属性值。

2. JQuery方法（需要引入JQuery库）：

使用元素.attr()方法来获取或设置元素的属性。该方法可以传递一个或两个参数。传递一个参数时，用于获取该属性的值；传递两个参数时，用于设置或更改该属性的值。

同样地，我们可以通过JQuery来更改图片的src属性。例如，我们可以使用$('img').attr('src', '6.jpg')来将图片的src属性更改为"6.jpg"。我们也可以使用$('img').attr('src')来获得图片的src属性值。

关于业务问题：在采购业务流程中，有时需要将打款流水图片上传到FTP服务器，但上传过程中可能会出现错误。因此需要一个修改图片的按钮。在实际操作中，当图片的src URL地址与之前相同时（仅更改图片名称，但名称不变），结果图片不会发生变化，仍然是之前的图片。通过Chrome调试发现图片实际上已经更改。造成这个问题的原因是浏览器缓存机制。当src地址不变时，浏览器会从缓存中加载图片，而不是从服务器加载新的图片。为了解决这个问题，我们可以在图片的src地址后面添加一个随机数来强制浏览器重新从服务器加载图片。

一、CSS样式编写

```css

/ 内容框样式 /

div.content {

width: 250px;

margin: 10px 0;

padding: 20px;

border: 2px solid #ff6666;

/ 图片样式 /

img {

width: 115px;

height: 115px;

/ 按钮样式 /

input[type='button'] {

height: 30px;

margin: 10px;

padding: 5px 10px;

```

二、jQuery代码实现

```javascript

$(document).ready(function(){

$("input[type='button']").click(function(){

var src_0 = $("img").attr("src"); // 获取当前图片地址

var src_1 = src_0 == "1.png" ? "2.png" : "1.png"; // 根据条件切换图片地址

$("img").attr("src", src_1); // 更新图片地址以切换图片显示

});

});

```

三、效果观察

3.1 初始状态：页面加载时显示的初始图片。

3.2 点击“切换图片”按钮后：通过jQuery代码实现点击按钮后，修改``标签的src属性，从而切换显示的图片。

通过这种方式，用户可以轻松地在不同图片之间进行切换。

关于HTML中``标签的src属性相对路径的写法：