uiuifree.com

- サイト制作のノウハウと最適化を目指して-

2020.7.23Vue.jsで画像パスが存在しない場合にnotfound用の画像を当てる

Vue.jsで画像パスが存在しない場合にnotfound用の画像を当てる

画像を動的に取得しているとき、パス切れを検知してデフォルト画像を当てる方法を紹介します。

実装例

index.vue
<template>
        <img src="hogehoge" @error="noImage">
</template>
<script>
export default {
  methods : {
    noImage(element){
      element.target.src = 'https://placehold.jp/600x300.png'
    }
  }
}

</script>

実装は非常にシンプルでimgタグに設定している画像が存在しない場合@errorでエラーハンドリングすることができます。 エラーハンドリングを行うメソッドnoImageを当てると第一引数に要素取得できますので、ここで直接画像パスを上書きすることでデフォルト画像を設定することができます。

PROFILE

このサイトを運営してるuiuifreeです。
渋谷のベンチャー企業で2年ほど新規事業を担当した後にフリーランスエンジニアにキャリア転換。
求人サイトの開発が多くエンジニア/看護師/保育士などの分野でサイトを運営しています。

アウトプット中の技術

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)