nhayder
170
2
Vue

vue Component not rendering images correctly

Posted 1 month ago by nhayder

i'm trying to load images dynamically from dedicated component,

// the media.embed is tested and passing correct data from DB;
<img :src="media(widget.embed)" class="w-full trans cursor-pointer">

in same component i'm updating the image like this

<script>
export default {

  props: ['widget', 'wIndex', 'contIndex', 'contID', 'controller'],

  methods:{

    media : function(url){

        axios.post('api/widget/getEmbedMedia', { 

            source : url,

        })

        .then(function (response) {

            console.log(response.data);
            // returned data is this https://i.ytimg.com/vi/Md_YnF09WDY/hqdefault.jpg

            return response.data; // this should update image

        })

        .catch(function (error) {

            return '/media/default/brokenmedia.png';

            Event.$emit('requestAlertEmbededMedia');

        });

    },

  }

}

</script>

Unfortunately, i can see the correct image path when console.log(resoinse.data) but the image is not getting updated.

Any Ideas???

Please sign in or create an account to participate in this conversation.