Image url not correct in HMR

• Laravel Mix Version: 0.12.1 (npm list --depth=0)
• Node Version (node -v): v7.10.0
• NPM Version (npm -v): 5.0.0
• OS: OSX

Description:

In HMR, using <img src="../../images/logo.png"> in the .vue file can’t load image in browser. the image url is /images/logo.png?[hash].

I think image url must be http://localhost:8080/images/logo.png?[hash] in HMR.

Steps To Reproduce:

1. app.js

window.Vue = require('vue');

Vue.component('example', require('./components/Example.vue'));

const app = new Vue({
    el: '#app'
});

1. Example.vue

<template>
    <div class="container">
        <img src="../../images/logo.png" />
    </div>
</template>

<script>
    export default {
    }
</script>

1. Add logo.png to directory

2. run npm run hot

Result

[pyrostrex]

How is this not documented yet? Thanks @CasperLaiTW , Anyhoo in the latest laravel-mix/webpack, i had remove the .options to get it to work. In case anyone wondering…

if (mix.config.hmr) {
    mix.setResourceRoot('//localhost:8080/');
}

[CasperLaiTW]

Thanks @ruchern

If I use npm run production it’s all working. image will be processed to public/images/ automatic

if I remove publicPath from loader or setup resourceRoot to be //localhost:8080/ - it’s working in HMR.

https://github.com/JeffreyWay/laravel-mix/blob/v0.12.1/setup/webpack.config.js#L179

so my workaround is

if (mix.config.options.hmr) {
    mix.setResourceRoot('//localhost:8080/');
}