0
167
ViewsImg element from Vue.js component is not rendered into Laravel production environment
I am compiling an img element for production with npm run prod from resources/images dir. The compilation is done with webpack.mix.js:
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css').vue();
Bottom of welcome.blade.php:
<body id="body">
<div id="app">
<app></app>
</div>
</body>
<script src="{{ mix('js/app.js') }}"></script>
</html>
The img element is inside a vue component:
<img :src="require('../images/portrait.png')" id="portrait" alt="">
and gets compiled to public/images dir:
As you can see portrait.png is compiled into public/images. But as soon as I try to run the app with php artisan serve the image is not displayed in the browser. It is the only image not displayed. The browser console shows:
Failed to load resource: the server responded with a status of 404 (Not Found)
on initial page load and:
GET http://127.0.0.1:8000/require(%60../images/portrait.png%60) 404 (Not Found)
on page refresh.
According to this img src thread on github require should work for img elements but it doesn't. Any workaround?
specs:
OS: Windows 10
Vue.js: 4.5.13
Laravel: 8.55.0
2 answers
Answer question0
There seems to be an issue with resolving the image as module. Could you try adding .default to the require statement?, e.g.
<img :src="require('../images/portrait.png').default" id="portrait" alt="">
Reference: https://github.com/JeffreyWay/laravel-mix/issues/2756
0
Can you just use
<img src="images/portrait.png" id="portrait" alt=""> ?