Img element from Vue.js component is not rendered into Laravel production environment

user_7826511 0
Viewed 48

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:

enter image description here

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
laravel vue.js html php javascript
2 Answers

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

user_23615000

Can you just use <img src="images/portrait.png" id="portrait" alt=""> ?

user_20616850
Related