jQueryで画像が存在すれば表示、なければノーイメージ画像を表示
2024/01/12
やりたかった事は以下の通り。
・画像のURLはcode.jpgみたいになってる
・テキストボックスにcode部分を入れて画像が存在すれば表示、
なければノーイメージ画像を表示させる
■javascript部分
function image_change(num){
var code = $("#code"+num).val(); //テキストボックスの内容を取得
var image_url = 'http://aaa/images/' + code + '.jpg'; //画像のURLを生成
$("#image"+num).attr('src' , image_url).error(function(){ //画像が見つかれば表示
$("#image"+num).attr('src' , 'http://aaa/images/noimage.jpg'); //無ければノーイメージ画像を表示
});
}
■HTML部分
<input type="text" id="code1" name="code1" onblur="image_change(1);">
<div><img src="https://aaa/images/noimage.jpg"></div>
<input type="text" id="code2" name="code2" onblur="image_change(2);">
<div><img src="https://aaa/images/noimage.jpg"></div>
■その他
error()
http://www.jquerystudy.info/reference/events/error.html
エラーが発生した際に実行する処理を設定できる。
javascriptのtry文みたいな感じなのかな。
キーイベントをトリガーにした方がリアルタイムに反映
できるけどサーバーとかブラウザに負荷かがかかりそうなので
テキストボックスからフォーカスが外れた時に関数実行。
関連記事
-
-
javascriptやjQueryで画像を書き換えても変わらない場合
けっこう前に画像をアップロードしてリアルタイムにプレビューする機能を作った時に、 ...
-
-
「slick」でarrows(次に進む・前に戻るボタン)を設定しても表示されない場合の対応方法
「slick」で画像スライダーを表示する際にarrows(次に進む・前に戻るボタ ...
-
-
jQueryで画像(
タグ内)のsrc情報を取得する場合
すぐに出てこなかったのでメモ。 $('#test').attr('src'); ...
-
-
画像アップロード前の時点で画像が選択されているか確認
やりたかった事は、フォーム内で画像をアップロードする際、 ちゃんと画像がローカル ...
-
-
「slick」でスライダー中央の下部にのみ指定したコンテンツを表示する方法
「slick」でスライダー画像の下部に何らかのコンテンツ(テキスト・リンク・別画 ...