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

最新推荐文章于 2025-06-23 16:52:49 发布

赏花赏景赏时光

最新推荐文章于 2025-06-23 16:52:49 发布

阅读量2.6w

点赞数 3

CC 4.0 BY-SA版权

分类专栏： jquery 文章标签：给img标签动态设置src属性不生效

本文链接：https://blog.youkuaiyun.com/tangxiujiang/article/details/78383565

jquery 专栏收录该内容

27 篇文章

订阅专栏

本文探讨了在JavaScript中为动态生成的img标签设置src属性时遇到的问题及解决方案。问题出现在尝试在元素未加入DOM前修改其属性。文章提供了两种解决方法：一是在创建img标签时直接设置src属性；二是先添加元素再修改属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

给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>'+
                					'<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)，给每个动态生成的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>'+
                					'<span class="lottery_name">' + nickname + '</span>'+
            					    '</li>';
				}else{
					li_item =  '<li>'+
               						'<img class="lottery_icon" id="img'+i+'" src="'+avatar+'"/>'+
                					'<span class="lottery_name">' + nickname + '</span>'+
            					  '</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>'+
                					'<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);
			}