Vue and Vite dynamically load photo libraries

demand

Vue will load some alternative local images, but not often used image files.

The problem

  1. For example, the large screen has a lot of static material. The packaging mechanism of Vue will only be packed when it is used. It will not be packed without preloading, which leads to the image cannot be typed in
  2. How to get these picture names in batches? I can delete or add pictures at any time, but it’s impossible to write down names
  3. Once you know the name, how do you guarantee that the next preview will load with that name? Path is also a problem

Original solution

  1. The solution proposed by avUE in the original project was to name the pictures in a unified way, followed by 1,2 and 3 in order to solve the problem of obtaining names
  2. Placing IMG directly into the IMG folder of Pubic can ensure that no matter whether the pictures are used or not, they will be packed into DIST intact, thus solving the path problem

Seems to solve the previous requirements, but there are new problems

  1. The name of the image must be the same as the folder name, as shown below. I don’t know

  1. If bG3 does not want to delete directly, the program will report an error, because at that time is preset how many images to load, delete a need to replace the image
  2. The suffix format should be the same, or PNG and JPG should be recorded in advance?? water?? So much trouble??

My solution

In view of the above problems

  1. Paths () : —- : / / require. Context (paths) : / / require. Context (paths) : / / require. Trouble ~~~~~ that can only obediently put pictures into assets folder, ha ha problem solved, but!! Context will not package the image into the project, do not believe you try it yourself!!
  2. copy-webpack-pluginThe plugin makes up for the lack of packaging and can package all images in the specified directory into the specified folder

vue.configThe configuration goes through a wave, so that the images are packed into the IMG directory

  1. Cannot use the dynamic variable!!!! in require.context() Going to waste all your work? Forget the trouble on the trouble, one by one to write, like me, although very ugly, but there is no better way

In this way, all images can be displayed, restoring the previous function and eliminating the damage of the original method

Vite loads images

Vite does not support require. Context (Paths), so it needs to be changed slightly

 const arrs = {
        bg: Object.keys(import.meta.globEager(`/src/assets/img/bg/*.*`)),
        border: Object.keys(
          import.meta.globEager(`/src/assets/img/border/*.*`)),source: Object.keys(
          import.meta.globEager(`/src/assets/img/source/*.*`)),banner: Object.keys(
          import.meta.globEager(`/src/assets/img/banner/*.*`)),other: Object.keys(import.meta.globEager(`/src/assets/img/other/*.*`))}Copy the code

It looks ugly, but import.meta.globEager doesn’t support dynamic template syntax, so live with it. Well, the following processing methods and the above consistent, not to say more, write down my own solution, but also hope to help some of the same difficulties encountered partners, of course, if there is a better solution, also hope to leave a message in the comment area!!