【问题标题】:Wrap <v-img> inside anchor tag?将 <v-img> 包裹在锚标签内?
【发布时间】:2020-05-05 18:31:31
【问题描述】:

我正在使用 Vuetify 1.5 并且有几个 &lt;v-avatars&gt;&lt;/v-avatars&gt;,其中我有一个 &lt;v-img&gt;&lt;/v-img&gt;。我正在尝试将 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/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>

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

【问题讨论】:

    标签: javascript html css vue.js vuetify.js


    【解决方案1】:

    如我所见,这是一个风格问题 - 只需将 height: 100%; width: 100% 添加到 a 标记(您可以查看结果 here

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2013-07-26
      • 2011-12-26
      • 1970-01-01
      • 2015-04-24
      • 1970-01-01
      • 2016-09-05
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多