JSFiddle - React, Tailwind, and code Playground

by kurotanshi

HTML

<script src="https://unpkg.com/vue@next"></script>
<div id="app">

<img 
  v-img-fallback
  src="https://www.google.com/noimage.png"
  alt="" >
  
</div>

JavaScript

// 建立新元件
const app = Vue.createApp({ });

// 在 app 註冊自定義指令
app.directive('img-fallback', {
  mounted (el) { 
    // 當 el 觸發 error 事件的時候，把 src 路徑換成預設圖
    el.addEventListener('error', () => {
      el.src = 'https://dummyimage.com/150x150/000/ffffff.png&text=no+image'
    });
  }
});

app.mount('#app');