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

本文探讨了在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);
			}





<think>好的,我现在需要解决用户在HTML中配置img标签的crossOrigin属性未生效的问题。首先,我得回忆一下关于跨域资源共享(CORS)的基本知识。当浏览器请求不同源的资源时,比如图片,如果服务器没有正确设置CORS头,浏览器可能会阻止加载该资源,或者在canvas操作时出现安全错误。 用户提到crossOrigin属性未生效,可能的原因有几个。首先,服务器必须支持CORS,也就是说在响应头中需要包含Access-Control-Allow-Origin,可能还需要其他相关头信息,比如Access-Control-Allow-Credentials。其次,crossOrigin属性设置方式是否正确,比如属性值应该是anonymous或use-credentials,并且需要确保在设置属性后再设置src属性,否则可能不生效。 接下来,我需要检查用户可能的配置错误。例如,用户是否正确地将crossOrigin属性设置为小写,因为在HTML中属性名是大小写不敏感的,但通常习惯用小写。同时,crossOrigin属性应该添加到img标签中,如<img crossOrigin="anonymous" src="...">。但有时候用户可能在动态创建img元素时,先设置src设置crossOrigin,这会导致问题,因为浏览器可能在设置src时立即发起请求,此时crossOrigin属性还未生效。 另外,服务器端的配置也是关键。如果服务器没有正确响应CORS请求,即使前端设置了crossOrigin属性,仍然无法解决问题。比如,服务器需要返回Access-Control-Allow-Origin: *或者具体的域名,并且如果请求带有凭证(如cookies),还需要Access-Control-Allow-Credentials: true,同时前端crossOrigin属性需要设置为use-credentials。 还有一个常见的问题是缓存。如果之前请求过相同的资源而没有CORS头,浏览器可能会缓存这个响应,导致后续即使服务器正确配置了CORS,浏览器依然使用旧的缓存。这时候可能需要清除缓存或者在请求URL中添加时间戳参数来避免缓存。 此外,使用第三方图片服务时,需要确认该服务是否支持CORS。例如,某些CDN或图片存储服务可能需要额外配置才能返回正确的CORS头。 总结下来,解决步骤可能是:1. 确保服务器正确配置CORS响应头;2. 正确设置img标签的crossOrigin属性,注意属性值和顺序;3. 处理缓存问题;4. 检查是否有控制台报错,如网络请求中的响应头信息是否包含CORS相关头;5. 如果使用凭证,确保前后端配置一致。 可能还需要参考用户提供的引用内容。引用[1]提到,设置crossorigin属性后,浏览器会发送带有CORS头的请求,但服务器必须正确响应。引用[2]指出script、link、img元素支持crossorigin属性。引用[3]是关于后端使用@CrossOrigin注解的配置,这可能提示用户同时涉及前后端的设置,需要确保后端允许跨域请求,特别是当需要携带凭证时,allowCredentials需要设置为true,并且前端crossOrigin属性设为use-credentials。 最后,可能需要给出具体的示例代码,说明如何正确设置img标签,并强调服务器配置的重要性,以及调试方法,比如检查网络请求的响应头,使用浏览器开发者工具查看控制台错误等。</think>### 正确配置HTML img标签的crossOrigin属性 #### 1. **基础配置步骤** - **属性语法**:在`<img>`标签中添加`crossorigin`属性,并指定其值为`anonymous`(默认)或`use-credentials`: ```html <img src="https://example.com/image.jpg" crossorigin="anonymous"> ``` - `anonymous`:请求不带凭证(如Cookie),服务器需返回`Access-Control-Allow-Origin: *`或匹配的域名。 - `use-credentials`:请求携带凭证,服务器需返回`Access-Control-Allow-Origin: 具体域名`且`Access-Control-Allow-Credentials: true`[^1][^3]。 - **属性顺序**:**先设置`crossorigin`,再设置`src`**。若通过JavaScript动态创建元素,需确保顺序正确: ```javascript const img = new Image(); img.crossOrigin = 'anonymous'; // 先设置crossorigin img.src = 'https://example.com/image.jpg'; // 后设置src ``` #### 2. **服务器端CORS配置** 确保服务器返回以下响应头: - **必选**:`Access-Control-Allow-Origin: *`或`Access-Control-Allow-Origin: https://your-domain.com`。 - **若用`use-credentials`**: - `Access-Control-Allow-Credentials: true` - `Access-Control-Allow-Origin`必须为具体域名,不能是`*`。 #### 3. **常见问题排查** - **缓存问题**:若服务器刚开启CORS支持,浏览器可能缓存旧的无CORS头的响应。解决方法: - 在URL中添加随机参数(如`?t=${Date.now()}`)。 - 强制刷新页面(Ctrl+F5)。 - **控制台报错**: - 检查网络请求的响应头是否包含CORS相关字段。 - 若报错“Failed to execute 'toDataURL' on 'HTMLCanvasElement'”,通常是因CORS未生效导致无法读取像素数据[^1]。 - **第三方资源限制**:确认图片服务器支持CORS(例如,AWS S3需配置CORS策略)。 #### 4. **完整示例(前后端协作)** - **前端代码**: ```html <img id="remote-img" crossorigin="anonymous" src="https://example.com/image.jpg"> ``` - **后端配置(以Spring Boot为例)**: ```java @CrossOrigin(allowCredentials = "true", origins = "https://your-domain.com") @RestController public class ImageController { // ... } ``` #### 5. **进阶调试** - 使用浏览器开发者工具: - 查看**Network**标签中图片请求的响应头。 - 检查**Console**中的CORS错误提示。 - 验证CORS配置工具: - 通过`curl -I https://example.com/image.jpg`检查响应头。 ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值