Laravel-mix: Image url not correct in HMR

[CasperLaiTW]

• 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

[ruchern-chong]

It is correct. You used a relative path, so the image url will be handled by url-loader.

[CasperLaiTW]

@ruchern Thanks for help, I know it will be handled by url-loader

but image will be processed by webpack, so image file in the webpack dev server, is it?

image didn't export to public/images directory, so browser can't get image.

[ruchern-chong]

@CasperLaiTW If you want the image to be in public/images you need to manually configure copy-webpack-plugin to copy the image into public/images

[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/');
}

[CasperLaiTW]

So I am not sure it's bug or something wrong in the config.

In my point, I think I don't change any setting or hard code between the HMR and Production mode.

[zhouyixiang]

In HMR mode, new images are served in webpack dev server, but the generated urls point to Laravel server. I think the solution from @CasperLaiTW should be integrated into laravel-mix or at least be documented.

[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/');
}

[scottasmith]

I have spent far too long wondering why my images were not being copied across in HMR.
This fix worked even in the latest mix, thanks!