Vuetify3+Nuxt3中v-list-item的prepend-avatar无法显示问题

API 探路者

2026-7-28

解决Nuxt3 + Vuetify3中v-list-item prepend-avatar图片不显示的问题

问题根源

你遇到的问题主要有两个：

未使用属性绑定：prepend-avatar="item.icon" 传递的是字符串 "item.icon"，而非变量item.icon的值，必须用:（v-bind语法）绑定属性。
Nuxt3资源路径解析：直接使用@/assets路径无法被构建工具正确解析为浏览器可访问的URL，需要借助Nuxt提供的resolveAsset函数处理路径。

修正代码

模板部分（核心修改）

<v-list-item
  link
  v-for="(item, index) in navLinks"
  :key="index"
  :prepend-avatar="resolveAsset(item.icon)"
  :title="item.title"
  :value="item.value"
  :to="item.path"
>
</v-list-item>

给prepend-avatar添加:实现属性绑定
用resolveAsset(item.icon)解析assets路径
修正v-for的key：原数组无index字段，改用循环的index（或给每个item添加唯一id更规范）

脚本部分（无需修改路径，保持原数组即可）

const navLinks = [
  {
    icon: "@/assets/images/icons/image1.png",
    title: "Link 1",
    value: "link 1",
    path: "/",
  },
  {
    icon: "@/assets/images/icons/image2.png",
    title: "Link 2",
    value: "link 2",
    path: "",
  },
  {
    icon: "@/assets/images/icons/image3.png",
    title: "Link 3",
    value: "link 3",
    path: "",
  },
  {
    icon: "@/assets/images/icons/image4.png",
    title: "Link 4",
    value: "link 4",
    path: "",
  },
];