JSFiddle - React, Tailwind, and code Playground

by kurotanshi

HTML

<script src="https://unpkg.com/vue@next"></script>
<div id="app">
  <img 
    v-image-fallback
    :src="imgSrc" alt="">
</div>

SCSS

#app {
  display: block;
  padding: 1rem;
  font-size: 1rem;
}

img {
  max-width: 300px;
  max-height: 300px;
}

JavaScript

const app = Vue.createApp({
	data () {
		return {
	  	imgSrc: 'https://c.files.bbci.co.uk/41CF/production/_109474861_angrycat-index-getty3-3.jpg'
    }
  }
});

app.directive('image-fallback', {
  beforeMount (el, binding, vnode) {
		console.log(el)
    console.log(binding)
    console.log(vnode)
  }
});


app.mount('#app');