javascript怎么动态更改img标签的src属性？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript怎么动态更改img标签的src属性？相关的知识，希望对你有一定的参考价值。
<html>
<HEAD>
</HEAD>
<BODY>
<img src="E:\photo4\1.jpg" />
</BODY>
</HTML>
这个用javascript代码动态更改src属性应该怎么做。
一楼；如果src是本地图片，那要怎么设置。
<HTML>
<HEAD>
<script type=text/javascript>
var img_idx=0;
var img_list=new Array("手机471.jpg","手机469.jpg");
function next_img()
img_idx++;
img_idx%=img_list.length;
return img_list[img_idx];
</script>
</HEAD>
<BODY>
<img src="手机471.jpg" onmouseover="this.src=next_img();"
onclick="this.src=next_img();"/>
</BODY>
</HTML>
扩展资料
for(var i = 0; i<len;i++)
var data = datas[i];
var nickname = data.nickname;
var avatar = data.avatar;
var li_item = '';
if(avatar == null)
// 只显示nickname
li_item = '<li>'+
'<span class="lottery_name">' + nickname + '</span>'+
'</li>';
else
li_item = '<li>'+
'<img class="lottery_icon" id="img'+i+'" />'+
'<span class="lottery_name">' + nickname + '</span>'+
'</li>';
//$('#img'+i).attr('src',avatar);
$('.lottery_main').append(li_item);
$('#img'+i).attr('src',avatar);
参考资料：百度百科 SRC
<HTML>
<HEAD>
<script type=text/javascript>
var img_idx=0;
var img_list=new Array("手机471.jpg","手机469.jpg");
function next_img()
img_idx++;
img_idx%=img_list.length;
return img_list[img_idx];
</script>
</HEAD>
<BODY>
<img src="手机471.jpg" onmouseover="this.src=next_img();" onclick="this.src=next_img();"/>
</BODY>
</HTML> 参考技术B <HTML>
<HEAD>
<script lanage="javascript">
function changeImg()
document.getElementById("img1").src="http://eiv.baidu.com/maimg/20080505/1098141554.gif"; //这里的图片是更换后的图片
</script>
</HEAD>
<BODY>
<img id="img1" src="E:\photo4\1.jpg" onClick="changeImg()" />
</BODY>
</HTML>
首先在<img>标签中加上一个id属性,再加一个onClick单击事件.
当单击这张图片时,图片的src就自动变成了http://eiv.baidu.com/maimg/20080505/1098141554.gif本回答被提问者采纳
vue绑定动态img标签的src地址
<li v-for="(item,index) in images" :key="index">
<img :src="item.src"></li>
如果使用vue-lazyloader就是
<img v-lazy="item.src"></li>
用js动态加载assets或者本文件的图片出现404的状态码，是vue-lazyloader出现404的原因也是如此。
原因：在webpack中会将图片图片来当做模块来用，因为是动态加载的，所以url-loader将无法解析图片地址，然后npm run dev 或者npm run build之后导致路径没有被加工。
https://blog.csdn.net/mr_yanyan/article/details/78783091
解决方法：
https://blog.csdn.net/qq_39313596/article/details/84644500
加个require()
<img :src="require(‘../assets/images/‘+imgsrc+‘.png‘)"/>
<img v-lazy="require(‘../assets/images/‘+imgsrc+‘.png‘)"/>
注意：require(../assets/images/）这部分是吧整个images文件夹都加载进来了，images文件夹中有些没有用到的图片也会被加载进来。
这里有个问题就是image中的图片是全部加载进来，如果有很多图片需要加载进来会影响网页运行速度吗？
更好的解决方法暂时没想出，先留坑吧。
以上是关于javascript怎么动态更改img标签的src属性？的主要内容，如果未能解决你的问题，请参考以下文章
如何动态更改多个video标签的src路径？比如src=a/x.mp4(x=1-10)