[Vuejs]-Vue project can't find image when using <a href> but can find it when using <img>

by

3👍

✅

Vue loader automatically transforms img src attributes in templates into webpack module requests, but by default it doesn’t do the same for links.

If you need to link directly to a file, you can put it in the public/ directory to bypass webpack (using a path relative to that directory — i.e. for a file in public/foo/bar.jpg you’d use <a href="/foo/bar.jpg">)

Alternatively, you can leave the file where it is, and tell webpack to transform <a href> urls into module requests, just as it does image src urls, by changing the transformAssetUrls options:

/* Add to vue.config.js */
module.exports = {
    chainWebpack: config => {
        config.module
            .rule("vue")
            .use("vue-loader")
            .loader("vue-loader")
            .tap(options => {
                // modify the options...
                options = Object.assign(options, {
                    transformAssetUrls: {
                        a: "href"
                    }
                });
                return options;
            });

    }
}

Leave a comment