[解決済み] JavaScriptで画像を表示するには?
2022-03-05 11:48:21
質問
JavaScriptで画像を表示させようとしているのですが、その方法がわかりません。次のようなものがあります。
function image(a,b,c)
{
this.link=a;
this.alt=b;
this.thumb=c;
}
function show_image()
{
document.write("img src="+this.link+">");
}
image1=new image("img/img1.jpg","dsfdsfdsfds","thumb/img3");
HTMLで
<p><input type="button" value="Vytvor" onclick="show_image()" > </p>
のようなものをどこに置けばいいのかがわからない。
image1.show_image();
.
HTML?それとも別の場所で...
どのように解決するのですか?
を活用することができますね。 Javascript DOM API . 特に、見てください。 createElement() メソッドを使用します。
このような画像を作成する再利用可能な関数を作成することができます...
function show_image(src, width, height, alt) {
var img = document.createElement("img");
img.src = src;
img.width = width;
img.height = height;
img.alt = alt;
// This next line will just add it to the <body> tag
document.body.appendChild(img);
}
それなら、こんな使い方も...。
<button onclick=
"show_image('http://google.com/images/logo.gif',
276,
110,
'Google Logo');">Add Google Logo</button>
jsFiddleで動作例をご覧ください。 http://jsfiddle.net/Bc6Et/
関連
-
[解決済み】'useState' が定義されていない no-undef React
-
[解決済み] 配列から特定の項目を削除するにはどうすればよいですか?
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] あるJavaScriptファイルを他のJavaScriptファイルにインクルードするにはどうすればよいですか?
-
[解決済み] JavaScriptでメールアドレスを検証するのに最適な方法は何ですか?
-
[解決済み] JavaScriptでオブジェクトをディープクローンする最も効率的な方法は何ですか?
-
[解決済み] JavaScriptのオブジェクトにキーが存在するかどうかをチェックする?
-
[解決済み] JavaScriptで要素のクラスを変更するにはどうすればよいですか?
-
[解決済み】オブジェクトからプロパティを削除する(JavaScript)
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Javascript:getElementById対getElementsById(両方が別のページで動作する)。
-
[解決済み】Uncaught TypeError: nullのプロパティ'value'を読み取ることができない
-
[解決済み】webpack: モジュールが見つかりません。Error: 解決できない(相対パスで)
-
[解決済み】NodeJS "ESモジュールをロードするためにインポートを使用する必要があります。"
-
[解決済み】Google Conversionsが動作しない - スクリプトが読み込まれない
-
[解決済み】ある要素を別の要素に移動させるには?
-
[解決済み】エラー:リクエストのエンティティが大きすぎる
-
[解決済み】JavaScriptで相対URLへのリダイレクトを行う
-
[解決済み】 Uncaught Reference Error: stLight is not defined (in Chrome only)
-
[解決済み】JavaScriptで関数が存在するかどうかを確認する方法は?