网页中通过js修改img的src属性刷新图片

JavaScript021

网页中通过js修改img的src属性刷新图片,第1张

业务：采购业务流程中当财务人员打款后需要将打款流水图片上传到ftp服务器上。可是有时会上传出错。所以这里需要一个修改的图片的按钮。问题：当img的src的URL地址与之前相同（只更改图片，名称不变，不同图片相同名称）时，结果图片不变化，还是之前的图片。但通过chrome调试发现图片确实是变化的。那造成这个问题的原因时什么呢？方法：只需要每次刷新图片时，在img的src地址后面拼接一个随机数即可。例子：原有图片地址：<img src="http://img.boredou.com/1234556788.jpg" /> 修改后图片地址：<img src="http://img.boredou.com/1234556788.jpg?23333333" /> 原理：经过在浏览起端调试，发现当src的地址不变时，浏览器会从缓存里面取出来。而浏览器缓存的还是之前的图片。所以图片不会变化。 而当img的src中拼接了随机参数，那么浏览器会认为这是一张新的图片（或者说访问了不同的路径），浏览器每次访问都会访问服务器，而不会访问缓存里数据。

通过找到img这个元素,然后再找到这个元素里的src属性,就可以查看,更改这个属性了

1)原生js

元素.setAttribute() //增加,更改属性,有两个参数,第一个参数是属性名,第二个是值.

元素.getAttribute() //传入属性名,获得该属性对应的值

2)Jquery(需要导包)

元素.attr()//可传两个参数,传一个为获取该属性的值,传两个位增加 或 更改这个属性.

举个例子:

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

</head>

<body>

<img src="6.jpg">

<script src="jquery-2.1.1.min.js"></script>

<script>

    //原生js

    document.getElementsByTagName('img')[0].setAttribute('name','myimg')//没'name'属性,添加'name'属性,值为'myimg'

    document.getElementsByTagName('img')[0].setAttribute('src','7.jpg')//以有'src'属性,更改值为'7.jpg',达到换图片的目的

    document.getElementsByTagName('img')[0].getAttribute('src')//返回'src'的值,'7.jpg'

    //Jquery

    $('img').attr('src','6.jpg')//把src属性更改为'6.jpg'

    $('img').attr('src')//获得src属性为'6.jpg'

</script>

</body>

</html>

用setAtrribute()方法

举个例子

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

</head>

<body>

<img src="1.jpg" alt="">

  <script>

  //获取到图片标签标签

  var img = document.getElementsByTagName("img")[0]

  //设置图片路径

  img.setAttribute("src","2.jpg")

  </script>

</body>

</html>