Modifying image element that is created by async javascript in Vue

I am injecting ads from Revive Adserver with this kind of component:

<template>   <div class="ins-box">    <ins ref="insEl" :data-revive-zoneid="zoneId" data-revive-id="hash"></ins>   </div>  </template>    <script>  export default {    props: {      zoneId: { type: String, default: '' }    },  }  

This is used by creating an "ins" element

<ins zone-id="1234" />  

Now, I have a Revive Adserver async javascript in the head that will load the ad image for the zone (in the example zone 1234).

The image tag it creates looks something like this:

<ins data-v-fdd5803a="" data-revive-zoneid="7859">   <a href="http://servedby.revive-adserver.net/ck.php?params" target="_blank">    <img src="https://www.source.com/image-555.jpg" width="468" height="60" alt="" title="" border="0">   </a>  </ins>  

I would like to edit the created img element when it is added into the DOM. I would need to remove the widht and height values.

In jquery I could do something like $('ins img').load(function() {})

What is the Vue way to do this? The element is not created by my Vue code and I don't have reference to it. On top of that the there might come new img element now and them.

https://stackoverflow.com/questions/65777581/modifying-image-element-that-is-created-by-async-javascript-in-vue January 18, 2021 at 11:38PM