html 加载img图片 不显示

处理图片的代码 在 $(document).ready方法中，此方法在html结构加载完成时执行，然而要注意的是，此时图片并没有加载完成。因此执行方法体的时候其实是没有image的，而图片完全加载的时候方法已经执行完了。
解决方法 1：在图片onload时再对图片进行处理。

$(document).ready(function(){
	var airportId = getUrlValue("airportId");
	if(airportId==null || typeof(airportId) == "undefined"){
		return false;
	}
	data = {
		'airportId' : airportId ,
	}
	Kelp.jsonPost(
			"../func/web/getActivityPointsMap",data,function(result){
				if(result.re== 1 || result.re == "1" ){
					var form = result.data.airportInfoMapForm;
					iWidth = form.imageWidth;
					iHeight = form.imageHeight;
					dWidth = form.width;
					imgW = iWidth*imageScale
					imgH = iHeight*imageScale;
					cellWidth = form.cellWidth * iWidth/dWidth;
					var attachId = form.imageAttachId;
				
				}
				else{
					alert(result.data);
					window.history.go(-1);
					return false;
				}
		
			//使画布大小对应机场图片大小
			canvas.width = iWidth+XO;
			canvas.height = iHeight+YO;	
	
			//创建新的图片对象
			var img = new Image(); 					
			/* var img = document.getElementById('img'); */
			img.src = "<%=request.getContextPath()%>/fileDownload?attachId=" + attachId;
			
			//浏览器加载图片完毕后再绘制图片
			img.onload = function(){
				var w = XO+ imgW;
				var h = YO +imgH;
				ctx.drawImage(img,XO,YO,imgW,imgH);//限制图片的宽高，此处没有imgW和imgH则会显示为图片的实际宽高
				//画网格线
				drawLine();
			};   
	});	
})

上述是在js中新建图片。
还有一种方法是：
在html中新建img实体标签。即：<img id = "img"></img>。这样就不存在不显示图片的问题了。

转载自原文链接, 如需删除请联系管理员。

原文链接：html 加载img图片 不显示，转载请注明来源！