Vuejs image loading gives image not found

Question

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:

So the image is being built successfully.

Please Help.

Answer 1

I added the following to .htaccess file

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

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