0

I'm working on the vuejs app and on developer mode my app running fine as expected. But when I creating the build and serve its build on local/server its not showing the images which is inside the folder of /public/images/image_1.jpg

Here is the code where I'm referencing the images in the component.

 computed: {
        locomotion_image() {
            return `/images/Locomotion_${this.image}.jpg`;
        }
    }

in the template consume this computed property

 <img v-if="size === 'lg'" :src="locomotion_image" :alt="[$t('locomotion cow ') + image]" class="hygiene-score-images__img mb-3">

the is the development environment image, as you can see the path is correct and images are showing as expected

warning I'm getting when build is complete

entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  main (5.46 MiB)
      js/chunk-vendors.e5ec3734.js
      css/main.881ab0a7.css
      js/main.f96f8547.js

as you can seen here images are showing here. here the after build screenshot, as you can seen the path is the same but images are loading properly

UmairAli
  • 21
  • 4
  • Since your image is dynamic (based on a `computed`), you probably want the following: https://stackoverflow.com/a/71922151/8816585 – kissu Nov 28 '22 at 10:12

1 Answers1

2

I found out the solution of this problem, By changing into my nginx file, Because /images/image_1.jpg is relative path and it'll be finding the image on this url like so www.xyz.com/images/image1.jpg.

Website doesn't have any route define like that so wasn't getting the image.

I just changed my nginx file and add location / images section.

root /var/www/html/zinpro-frontend/dist;        
server_name hk2.zinprofirststep.com;
        error_page 404 /;

     location /images {
        alias /var/www/html/zinpro-frontend/dist/images;
}
UmairAli
  • 21
  • 4