0
570
VistasEl elemento Img del componente Vue.js no se procesa en el entorno de producción de Laravel
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.02 Respuestas
Responde la pregunta0
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
0
¿Puedes simplemente usar <img src="images/portrait.png" id="portrait" alt=""> ?