Estoy compilando un img element
para producción con npm run prod
from resources/images
dir. La compilación se realiza con webpack.mix.js
:
const mix = require('laravel-mix'); mix.js('resources/js/app.js', 'public/js') .postCss('resources/css/app.css', 'public/css').vue();
Parte inferior de welcome.blade.php
:
<body id="body"> <div id="app"> <app></app> </div> </body> <script src="{{ mix('js/app.js') }}"></script> </html>
El img element
está dentro de un vue component
:
<img :src="require('../images/portrait.png')" id="portrait" alt="">
y se compila en el directorio public/images
:
Como puede ver, portrait.png
se compila en public/images
. Pero tan pronto como trato de ejecutar la aplicación con php artisan serve
la imagen no se muestra en el navegador. Es la única imagen que no se muestra. La consola del navegador muestra:
Failed to load resource: the server responded with a status of 404 (Not Found)
en la carga de la página inicial y:
GET http://127.0.0.1:8000/require(%60../images/portrait.png%60) 404 (Not Found)
en la actualización de la página.
De acuerdo con este hilo img src en github require
debería funcionar para img elements
pero no es así. ¿Alguna solución?
especificaciones:
OS: Windows 10 Vue.js: 4.5.13 Laravel: 8.55.0
Parece que hay un problema con la resolución de la imagen como módulo. ¿Podría intentar agregar .default
a la instrucción require?, por ejemplo
<img :src="require('../images/portrait.png').default" id="portrait" alt="">
Referencia: https://github.com/JeffreyWay/laravel-mix/issues/2756
¿Puedes simplemente usar <img src="images/portrait.png" id="portrait" alt="">
?