Search code examples
vue.jsvuejs3vuetify.jsvuetifyjs3

v-img can't locate resource from assets folder

I am having problems displaying a static image located at src/assets/images/logo.png folder with the v-img Vuetify component.

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

It doesn't load with Vuetify, but using a plain img tag it does find the resource. Also vscode provides completion for the image relative path so I don't know why vuetify isn't loading it correctly.

Solution

  • It works on <img> due to the vue compiler feature transformAssetUrls. Vuetify's vite plugin has a preset for this to support vuetify components:

    // 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