Search code examples
imagevue.jswebpackwebpack-encorewebpack-file-loader

Vuejs image loading gives image not found

I am building a symfony web app and using Webpack Encore to compile VUE components for the frontend.
In the vue component i am trying to load an image which gives me errors whatever i do and its not loading.

  1. :src="require('../../assets/images/logo-white.png').default"
    I get this error
    logo-white.fa1b3bfe.png:1 GET http://localhost:8080/try/web/app_dev.php/build/images/logo-white.fa1b3bfe.png 404 (Not Found)
  2. :src="'../../assets/images/logo-white.png'"
    I get this error
    logo-white.png:1 GET http://localhost:8080/try/assets/images/logo-white.png 404 (Not Found)
  3. src="../../assets/images/logo-white.png" or :src="require('../../assets/images/logo-white.png')"
    I get this error
    [object%20Module]:1 GET http://localhost:8080/try/web/app_dev.php/[object%20Module] 404 (Not Found)

I tried many more and i also tried to change webpack configuration setting esModule to false.

This is my project structure:

enter image description here

So the image is being built successfully.

Please Help.

Solution

  • I added the following to .htaccess file

    RewriteCond %{REQUEST_URI} app_dev.php/build/*

    RewriteRule ^app_dev.php/(.*) $1