将 包裹在锚标签内?

问题描述 投票:0回答:1

我正在使用Vuetify 1.5,并在其中有几个<v-avatars></v-avatars>,而我有一个<v-img></v-img>。我正在尝试将img标签包装在a标签内,但是一旦我这样做,图像就会停止渲染。有人遇到过这样的问题吗?

查看此Codepen

这是完整的示例:-

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/[email protected]/dist/vuetify.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>

任何帮助将不胜感激。谢谢。 :)

javascript html css vue.js vuetify.js
1个回答
2
投票

正如我所看到的,这是一个样式问题-只需将height: 100%; width: 100%添加到a标签中即可(您可以检查结果here

© www.soinside.com 2019 - 2024. All rights reserved.