NuxtJS Vuetify 背景图像 v-app-bar 作为 href

【问题标题】：NuxtJS Vuetify Background Image v-app-bar as a hrefNuxtJS Vuetify 背景图像 v-app-bar 作为 href
【发布时间】：2021-10-28 18:27:09
【问题描述】：

我使用 NuxtJS 2 和 Yarn 并使用 Vuetify。为了让我的应用程序的徽标位于 v-app-bar 的中心，我使用了以下代码：

<template>
   <v-app>
     <v-app-bar app>
       <template v-slot:img="{ props }">
         <v-img v-bind="props" :src="logoUrl" class="pa-4" contain></v-img>
       </template>
     <v-app-bar app>

问题是我无法在这个 v-img 组件上创建一个 href / NuxtLink。

我怎样才能实现这种行为？

【问题讨论】：

标签： vue.js nuxt.js vuetify.js

【解决方案1】：

只需将v-img 组件包装在nuxt-link 组件中即可。

<nuxt-link to="/">
    <v-img v-bind="props" :src="logoUrl" class="pa-4" contain></v-img>
</nuxt-link>

【讨论】：

也这么想。但不能作为可点击的图片（它被 Vuetify 渲染为 CSS 背景图片）。
@baer999 必须是图像吗？我使用与在多个项目中发送的相同的 sn-p，并且可以很好地单击图像。（即使它可能不是真正的 img 元素。）如果您希望它成为 img 元素，则必须使用常规的 <img> 标签，因为 v-img 仅使用 CSS 背景图像。