vue-loader provides a mechanism to transform a relative asset path inside a template to a javascript module:
// source
<template>
<img src="../image.png" />
</template>
// result after transform
createElement('img', { attrs: { src: require('../image.png') // this is now a module request } })
This works on a new vue-cli project (without vuetify-plugin). But it breaks as soon as the vuetify plugin is added.
As a result, the relative path isn't transformed and this results in a 404 when the app is rendered.
The workaround is to use :src="require('./{assetPath}')" . However I think this is a bug that should be fixed or documented. I spent hours debugging after upgrading from vuetify 2 to v3.
I got the same issue ! Could it be fixed ? The workaround works but it remains a workaround. It is not great to need to change all our asset paths during the migration... 😕
Problem description
vue-loader provides a mechanism to transform a relative asset path inside a template to a javascript module:
This works on a new vue-cli project (without vuetify-plugin). But it breaks as soon as the vuetify plugin is added.
As a result, the relative path isn't transformed and this results in a 404 when the app is rendered.
Example
The behaviour can be reproduced here: https://stackblitz.com/edit/github-ahnvys-fgocjn?file=src/components/HelloWorld.vue
Workaround
The workaround is to use
:src="require('./{assetPath}')"
. However I think this is a bug that should be fixed or documented. I spent hours debugging after upgrading from vuetify 2 to v3.