Resolve asset in <a> href (like <img> src)

[b-zee]

What problem does this feature solve?

Allows linking to assets without using /public folder.

What does the proposed API look like?

<a href="../assets/logo.png">
  <img src="../assets/logo.png">
</a>

Results in:

<a href="../assets/logo.png">
  <img src="/img/logo.4f17609b.png">
</a>

Should result in:

<a href="/img/logo.4f17609b.png">
  <img src="/img/logo.4f17609b.png">
</a>

[Akryum]

Use require to use the webpack loaders:

<a :href="require('../assets/logo.png')">

[yyx990803]

https://vue-loader.vuejs.org/options.html#transformasseturls

[MissakaI]

https://vue-loader.vuejs.org/options.html#transformasseturls

@yyx990803 how to change these in vue.config.js please advice. I am new to vue.

[Basti82b]

The following works for me with Vue 2.6.11 (but not with 3.0.0):

module.exports = {
    chainWebpack: config => {
        config.module
            .rule('vue')
            .use('vue-loader')
            .tap(options => {
                // modify the options...
                options.transformAssetUrls = { a: 'href' };
                //console.log(options)
                return options;
            })
    }
}