[Vuejs]-Laravel + Vuejs: How to link image to Laravel Public folder

by

0👍

Found it:

#1 Create an alias in webpack.config.js. Add this '@assets': path.resolve(__dirname, 'public') line of code.

webpack.config.js

const path = require('path');

module.exports = {
    resolve: {
        alias: {
            '@': path.resolve('resources/js'),
            '@assets': path.resolve(__dirname, 'public')
        },
    },
};

#2 Load config to webpack.mix.js. Add these lines of code:

const webpackConfig = require('./webpack.config');
mix.webpackConfig(webpackConfig);

#3 Use the alias
<img src='@assets/images/3379.svg' alt="computer"/>

[Reference]
https://laracasts.com/discuss/channels/javascript/how-to-shortcut-the-path-to-the-assets-directory-in-vuejs-spa

Leave a comment