v-img 无法从资产文件夹中找到资源

Question

src/assets/images/logo.png我在使用Vuetify 组件显示位于文件夹中的静态图像时遇到问题v-img。

      <v-img src="@/assets/images/rima_logo.png"></v-img>

它不会使用 Vuetify 加载，但使用普通img标签确实可以找到资源。另外 vscode 提供了图像相对路径的补全，所以我不知道为什么 vuetify 没有正确加载它。

Answer 1

<img>由于 vue 编译器功能，它可以工作transformAssetUrls。Vuetify 的 vite 插件有一个预设来支持 vuetify 组件：

// vite.config.js
import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'

export default {
  plugins: [
    vue({ 
      template: { transformAssetUrls }
    }),
    vuetify(),
  ],
}

https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin#image-loading