Why is vue / vite build not including all images in the package

Question

My app includes a dozen or so image files. Some of these are merged into the /assets/index-?????.js file (as I would expect), others are not and are put into the /assets folder separately (with name-mangling). Here is the build ouput:

vite v4.1.4 building for production...
✓ 436 modules transformed.
dist/index.html                      0.43 kB
dist/assets/notrack-6b2c347b.jpg     4.42 kB
dist/assets/topright-3d03ad17.png    4.72 kB
dist/assets/holder-f1d73545.jpg      8.21 kB
dist/assets/noentry-492af733.jpg     9.71 kB
dist/assets/index-8c326570.css     401.51 kB │ gzip:  50.54 kB
dist/assets/index-da5aa7cc.js      377.53 kB │ gzip: 129.16 kB

Those four image file are not differently used / defined as the other 10, which have been merged into index-da5aa7cc.js . All the images are defined thus:

const botright =  new URL('./assets/images/botright.png', import.meta.url).href

and I have also tried

import  botright from './assets/images/botright.png'

which gives the same results. I have read this thread but it hasn't helped.

All of the images are used in the same way:

  <v-img class="cannotDrag"
    @dragstart="drag($event)"
    :src = cell.content
    > 
  </v-img>

The package all works OK in the browser, but I am curious as to why not all image files are treated the same way. It's not as if these four images are the first 4 (or the last 4) to be defined, or that some are .png and the others are .jpg (I also tried changing them all to .png but got a very similar result).

Answer 1

Vite handling of static assets is well documented here static handling

You can read through to find the option that best fits your use case. For my use case, I had dynamic image urls from an API that point to the static assets folder in my project. So when Vite builds, the dynamic images were not included in the dist folder. The code below perfectly handled it.

export const getImageUrl = (path: string) => {
 return new URL(`../assets/${path}`, import.meta.url).href;
};

/* so you use it in your code like this 
   depending if it's a method or handling 
    you decide to use the util function 
*/

<v-img class="cannotDrag"
 @dragstart="drag($event)"
 :src ="getImageUrl(cell.content)"
 > 
</v-img>

so I use this util function to resolve the path to the images and when the application eventually builds the dynamic images are included. Like I mentioned, there are several options to explore. So check the docs for more info. Also you can take a look at the Vue 3 Vite - dynamic image src.

All the best.