HTML img で画像が表示されない場合はどうすればよいですか?

藏色散人
リリース: 2021-06-08 10:35:02
オリジナル
10038 人が閲覧しました

html img で画像が表示されない場合の解決策: 1. 画像のオンロード時に画像を処理します。 2. "HTML img で画像が表示されない場合はどうすればよいですか? のようなコードを使用して、HTML に新しい img エンティティ タグを作成します。 」。

HTML img で画像が表示されない場合はどうすればよいですか?

#この記事の動作環境: Windows7 システム、HTML5 バージョン、DELL G3 コンピューター

html画像を読み込む 表示しない

画像を処理するコードは $(document).ready メソッドにあり、このメソッドは html 構造が読み込まれるときに実行されます。この時点では画像はロードされていません。したがって、メソッド本体が実行される時点では実際にはイメージは存在せず、イメージが完全にロードされた時点でメソッドが実行されます。

解決策 1: オンロード時に画像を処理します。

$(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 エンティティ タグを作成します。つまり、 です。このようにすれば、写真が表示されないという問題は発生しません。

推奨学習: 「

HTML ビデオ チュートリアル

以上がHTML img で画像が表示されない場合はどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!