简体   繁体   English

裹<v-img>在锚标签内?</v-img>

[英]Wrap <v-img> inside anchor tag?

I am using Vuetify 1.5 and have a couple of <v-avatars></v-avatars> inside which i have a <v-img></v-img> .我正在使用 Vuetify 1.5 并且有几个<v-avatars></v-avatars>里面我有一个<v-img></v-img> I am trying to wrap the img tags inside an a tag but as soon as i do it, the images stop rendering.我正在尝试将 img 标签包装在a标签内,但一旦我这样做,图像就会停止渲染。 Anyone came across such an issue before?以前有人遇到过这样的问题吗?

Check out this Codepen看看这个Codepen

This 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,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", alt: "linkedin", link: "https://www.linkedin.com/home" }, { img: "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQiQM_C9rIIimqSLUNYqt6qETIEeXjvH54ZuaFYphEUxLNC6iCR&usqp=CAU", alt: "github", link: "https://github.com/" } ] }; } });
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/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>

Any help will be appreciated.任何帮助将不胜感激。 Thank you.谢谢你。 :) :)

As i see, that's a style issue - just add height: 100%; width: 100%如我所见,这是一个风格问题 - 只需添加height: 100%; width: 100% height: 100%; width: 100% to a tag (you can check result here ) height: 100%; width: 100% a标签(您可以在此处查看结果)

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM