html中img不顯示圖片的解決方法

這篇文章主要介紹了html中img不顯示圖片的解決方法，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

html img不顯示圖片的解決辦法：1、在圖片onload時(shí)，再對(duì)圖片進(jìn)行處理；2、在html中新建img實(shí)體標(biāo)簽，代碼如“<img id = "img"></img>”。

本文操作環(huán)境：windows7系統(tǒng)、HTML5版，DELL G3電腦

html 加載img圖片 不顯示

處理圖片的代碼 在 $(document).ready方法中，此方法在html結(jié)構(gòu)加載完成時(shí)執(zhí)行，然而要注意的是，此時(shí)圖片并沒有加載完成。因此執(zhí)行方法體的時(shí)候其實(shí)是沒有image的，而圖片完全加載的時(shí)候方法已經(jīng)執(zhí)行完了。

解決方法 1：在圖片onload時(shí)再對(duì)圖片進(jìn)行處理。

$(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;
}
//使畫布大小對(duì)應(yīng)機(jī)場(chǎng)圖片大小
canvas.width = iWidth+XO;
canvas.height = iHeight+YO;
//創(chuàng)建新的圖片對(duì)象
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則會(huì)顯示為圖片的實(shí)際寬高
//畫網(wǎng)格線
drawLine();
};   
});
})

上述是在js中新建圖片。

還有一種方法是：

在html中新建img實(shí)體標(biāo)簽。即：<img id = "img"></img>。這樣就不存在不顯示圖片的問題了。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“html中img不顯示圖片的解決方法”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!