javascriptを使って画像のリンク切れに一括で代替画像を表示させる
タイトルの通りなのですが、記事のアーカイブなどでサムネイル画像がない場合に代替画像を表示させるケースもあるかと思います。そんな時にjavascriptを使ってフロント側で代替画像に差し替えたい時に使えるテクニックです。
単純なコードになりますがサンプルを見ていきます。ちなみにですが、あらかじめ代替画像を用意しておきましょう。まずは対象の画像が1つだけの場合はこんな感じになります。
いかがでしょうか、メディアサイトやブログサイトの構築で使える場面がありそうですね。WordPressでは独自の関数が用意されていますが、JavaScriptで代替する必要がある場合にはこのような対応ができます。
// HTML <img src="../example.jpg" alt="画像"> // javascript(ES6) const image = document.querySelector('img'); image.addEventListener('error',() => { image.setAttribute('src', '../no-image.jpg'); });シンプルですが、まずは画像要素を取得して、エラーイベントのコールバック関数内で、対象の画像ソースURLを代替画像のものに差し替えています。また対象の画像が複数ある場合にはこのような形にします。
// HTML <img src="../example-01.jpg" alt="画像"> <img src="../example-02.jpg" alt="画像"> <img src="../example-03.jpg" alt="画像"> <img src="../example-04.jpg" alt="画像"> // javascript(ES6) const images = document.querySelectorAll('img'); images.forEach((image) => { image.addEventListener('error',() => { image.setAttribute('src', '../no-image.jpg'); }); });ほとんど同じですが、対象の要素が複数の場合は、すべての要素を取得する必要があります。そしてforEachで各要素ごとにチェックしていきます。
いかがでしょうか、メディアサイトやブログサイトの構築で使える場面がありそうですね。WordPressでは独自の関数が用意されていますが、JavaScriptで代替する必要がある場合にはこのような対応ができます。
sponserd
keyword search
recent posts
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
- ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
categories