Asynchronously load image through Promise in vue js with directive

async_image_vuejs_directive.md

Create Global Directive

const vueApp=createApp({})
const replaceElementChildrenWithImage = async (el, binding ) => {
    try {
      const image = await binding.value;
      if (image) el.replaceChildren(image);
    } catch (err) {
      console.error("Image can't be resolved seems like url is broken",err);
    }
};
vueApp.directive("asyncImage", {
    updated: async (el, binding) => {
      await replaceElementChildrenWithImage(el, binding);
    },
    created: async (el, binding) => {
      await replaceElementChildrenWithImage(el, binding);
    },
});

Inside Vue Component

<template>
  <div v-async-image="asyncImage"></div>
<template>  

<script setup lang="ts">
import {ref,onMounted} from 'vue'
const asyncImage=ref<Promise<HtmlImageElement>>()
onMounted(()=>{
  setInterval(
        ()=>{
          asyncImage.value=getImageByUrl(`https://picsum.photos/200/300?${Math.random()*100000}`)
  },2000);
});

function getImageByUrl(url){
return new Promise((resolve,reject)=>{
  const image=new Image()
  image.onLoad=()=>{
  resolve(image)
  }
  image.onError=(event)=>{
  reject(event)
  }
  image.src=url;
  })
}
</script>