给img标签动态设置src属性，不生效

亦凉 2022-06-06 03:41 1194阅读 0赞

**给img标签动态设置src属性，不生效**

js如下：

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>'+
 					'' + nickname + ''+
 					'</li>';
 				}else{
 					li_item = '<li>'+
 						'<img class="lottery_icon" id="img'+i+'" />'+
 					'' + nickname + ''+
 					 '</li>';
 		 $('#img'+i).attr('src',avatar);
 				}
 				$('.lottery_main').append(li_item);
 	 }

问题：如 $('\#img'+i).attr('src',avatar)，给每个动态生成的img标签添加属性src，但是在显示效果的时候，不能获取到给图片             的 地址。

原因：在js里面是先动态生成li标签，在改li还没有添加到DOM之前，就通过获取页面中的节点的方法去取DOM节点（$('\#img'+i)），所以按照上面红色代码的写法是不生效的，即设置的属性没有生效。

解决方法：

1、直接在动态生成img中设置属性：

'<img class="lottery\_icon" id="img'+i+'" src="'+avatar+'"/>

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>'+
 					'' + nickname + ''+
 					 '</li>';
 				}else{
 					li_item = '<li>'+
 						'<img class="lottery_icon" id="img'+i+'" src="'+avatar+'"/>'+
 					'' + nickname + ''+
 					 '</li>';
 		 //$('#img'+i).attr('src',avatar);
 				}
 				$('.lottery_main').append(li_item);
 			}

2、在将li标签添加到DOM中之后，在设置img的src：

将语句 $('\#img'+i).attr('src',avatar);的顺序换一下

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>'+
 					'' + nickname + ''+
 					'</li>';
 				}else{
 					li_item = '<li>'+
 						'<img class="lottery_icon" id="img'+i+'" />'+
 					'' + nickname + ''+
 					'</li>';
 		 //$('#img'+i).attr('src',avatar);
 				}
 				$('.lottery_main').append(li_item);
 $('#img'+i).attr('src',avatar);
 			}