Laravel mix image handling

Question

I have recently switched to laravel-mix from Vue-CLI. All my images in html stopped working. They were used like this:

(@assets is a alias for the resources/assets folder)

With this method, when I look at the html in the browser, I see that it got compiled to [object Module]. So I was able to fix it this way:

But I can't imagine this being the best solution, it seems very hacky and I dont want to add this require().default thing everytime I use an image.

I've tried adding this to the mix.webpackConfig:

module: {
    rules: [
        {
            test: /\.(png|jpe?g|gif)$/i,
            use: [
                {
                    loader: 'file-loader',
                    options: {
                        esModule: false,
                    },
                },
            ],
        },
    ]
}

But that doens't do anything, but I don't even know if it works at all to be honest.

Is there a better way to use images with laravel-mix or is require().default really the way to go?

user_14305076 · Answer

Laravel-mix offers the ability to configure aliases

const path = require('path');

mix.alias({
    '@assets': path.join(__dirname, 'resources/assets')
});

Laravel mix image handling

1 Answers