I am currently using Vuetify 1.5 and have included a couple of
<v-avatars></v-avatars><v-img></v-img>. I attempted to enclose the img tags within an a tag but encountered an issue wherein the images do not display once wrapped. Has anyone encountered this problem before?
Feel free to check out this Codepen link
Here is the complete example:-
new Vue({
el: "#app",
data() {
return {
avatarData: [{
img: "https://toppng.com/public/uploads/preview/ew-instagram-logo-transparent-related-keywords-logo-instagram-vector-2017-115629178687gobkrzwak.png",
alt: "instagram",
link: "https://www.instagram.com/"
},
{
img: "https://www.freepnglogos.com/uploads/facebook-icons/facebook-icon-transparent-background-3.png",
alt: "facebook",
link: "https://www.facebook.com/"
},
{
img: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADgCAMAAADCMfHtAAAAZlBMVEX///8bdbsAbLfM2+wwfb4AbrgJcbl6pNCtxuEAabYScrp+p9Lp8Pcjeb3m7fUAa7cAZ7VQjMVbkshFiMP4+/3C1Ohmmcvb5vK4zeXQ3u3u8/mrxOCJrtUAZbWVttk7gsGgvdyRs9gZTNFtAAAGWUlEQVR4nO2d65aiOhBGTRQ0sRGIitdRfP+XPE2jt...
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="43353626372a253a03726d766d7277">[email protected]</a>/dist/vuetify.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e99f9c8c9d808f90a9d8c7dcc7d8dd">[email protected]</a>/dist/vuetify.min.css" rel="stylesheet" />
<div id="app">
<v-app id="inspire">
<v-layout row>
<v-avatar class="mx-4" size="50px" v-for="(data,index) in avatarData" :key="index" style="cursor:pointer">
<a :href="data.link" target="_blank">
<v-img :src="data.img" :alt="data.alt">
</v-img>
</a>
</v-avatar>
</v-layout>
</v-app>
</div>Please, if you have any insights or solutions regarding this issue, it would be greatly appreciated. Thank you! :)