Home > Web Front-end > Front-end Q&A > What should I do if html img does not display images?

What should I do if html img does not display images?

藏色散人
Release: 2021-06-08 10:35:02
Original
10106 people have browsed it

html Solution to img not displaying images: 1. Process the image when onloading the image; 2. Create a new img entity tag in html, with code such as "”.

What should I do if html img does not display images?

The operating environment of this article: windows7 system, HTML5 version, DELL G3 computer

html Load img image Do not display

The code for processing images is in the $(document).ready method. This method is executed when the html structure is loaded. However, it should be noted that the image has not been loaded at this time. Therefore, there is actually no image when the method body is executed, and the method has been executed when the image is completely loaded.

Solution 1: Process the image when it is onloaded.

$(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();
};   
});
})
Copy after login

The above is to create a new image in js.

Another method is:

Create a new img entity tag in html. That is: . In this way, there will be no problem of not displaying pictures.

Recommended study: "HTML Video Tutorial"

The above is the detailed content of What should I do if html img does not display images?. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template