Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Support Vuetify's 'v-img' 'src' attribute in 'transformToRequire` defaults

See original GitHub issue

What problem does this feature solve?

vue-loader does not automatically require assets referenced in the src attribute of Vuetify’s v-img tag.

Given that Vuetify is a prominent part of Vue’s ecosystem and v-img is often a drop-in replacement for img, supporting this natively would be desirable.

Current workarounds to this problem are not seamless and have a more awkward syntax.

What does the proposed API look like?

No API surface changes are required.

Template markup looking like <v-img src="@/assets/logo.png"> will now compile properly.

Issue Analytics

State:
Created 5 years ago
Comments:5 (2 by maintainers)

Top GitHub Comments

1reaction

Justineocommented, Mar 19, 2019

You can use Vue Loader’s transformAssetUrls option to configure your own element/attribute combinations to be transformed. If you want that out-of-the-box, I think it’s better to let Vuetify integrate this feature into their Vue CLI plugin.

/cc @johnleider

0reactions

brianhelbacommented, Mar 19, 2019

Note, it is still a very minor bug that https://github.com/vuejs/component-compiler-utils/pull/45 never downstreamed documentation updates to vue-loader and vue-component-compiler.

Top Results From Across the Web

VueJS: Building dynamic src path for Vuetify v-img

We only store the image's Id which is then dynamically inserted into the src attribute of v-img . But dynamically inserting src value...

Using vue-template-loader with Vue.js to Compile HTML ...

Since vue-template-loader supports vue-class-component we can use decorators on ... the src attribute of ** tags can specified with options:.

Image component — Vuetify

Usage. v-img component is used to display a responsive image with lazy-load and placeholder.

Grab first <img> or <img> src from Rich Text field

I need to use this image as the overview thumbnail on a listing page. How can I extract that image tag, or just...

Vue/Vuetify And Binding Carousel Img Src With A Method Not ...

vue-loader automatically converts project relative src attributes on <img> tags, but doesn't automatically for BootstrapVue custom components that accept ...