vue3+vite assets dynamically introduce images and solve the problem of incorrect image path not being displayed after packaging

vite Official default configuration, if the resource file is packaged in the assets folder, the hash value will be added to the image name, but if it is introduced directly through: src="imgSrc", it will not be parsed during packaging, causing the development environment Can be imported normally, but cannot be displayed after packaging

We see that we actually do not want the resource files to be compiled by wbpackIt will be easier to put the images in the public directory, whether it is a development environment or production environment, you can always keep the image path consistent with the root directory, this is consistent with webpack

See this, maybe the problem is solved, if in Vite does need to put static files in assets. Let’s look down:

Here we first assume:
Static file directory: src/assets/images/
Our target static file is in src/assets/images/home/home_icon.png

<img  :src="require(&#39;@/assets/images/home/home_icon.png&#39;)" / alt="vue3+vite assets dynamically introduce images and solve the problem of incorrect image path not being displayed after packaging" >

We tried require dynamic introduction and found an error: require is not defind, this is because require is a method belonging to Webpack

The first way (suitable for processing single linked resource files)

import homeIcon from '@/assets/images/home/home_icon.png'
<img  :src="homeIcon" / alt="vue3+vite assets dynamically introduce images and solve the problem of incorrect image path not being displayed after packaging" >

The second way Method (suitable for processing multiple linked resource files)

Recommended, the variables passed in this way can be dynamically passed in the file path! !

Static resource processing | Vite official Chinese document
new URL() import.meta.url

Here we assume:
Tool file Directory: src/util/pub-use.ts
pub-use.ts

// 获取assets静态资源
export default  const getAssetsFile = (url: string) => {
   return new URL(`../assets/images/${url}`, import.meta.url).href
}

Use

import usePub from '@/util/public-use'
setup () {
  const Pub = usePub()
  const getAssetsFile = Pub.getAssetsFile
  return { getAssetsFile }
}

to include the file path

<img  :src="getAssetsFile(&#39;/home/home_icon.png&#39;)" / alt="vue3+vite assets dynamically introduce images and solve the problem of incorrect image path not being displayed after packaging" >

The third method (applicable to processing multiple linked resource files)

is not recommended. The files introduced in this way must be specified to the specific folder path, and the incoming variables can only be The file name cannot contain the file path

Use vite's import.meta.glob or import.meta.globEager. The difference between the two is that the former is lazy Load resources, which are introduced directly.

Here we assume:
Tool file directory: src/util/pub-use.ts
pub-use.ts

// 获取assets静态资源
export default const getAssetsHomeFile = (url: string) => {
    const path = `../assets/images/home/${url}`;
    const modules = import.meta.globEager("../assets/images/home/*");
    return modules[path].default;
}

Use

import usePub from '@/util/public-use'
setup () {
  const Pub = usePub()
  const getAssetsHomeFile = Pub.getAssetsHomeFile 
  return { getAssetsHomeFile }
}

Cannot include the file path

<img  :src="getAssetsHomeFile(&#39;home_icon.png&#39;)" / alt="vue3+vite assets dynamically introduce images and solve the problem of incorrect image path not being displayed after packaging" >

Supplement: If the background image is introduced (must use a relative path)

.imgText {
  background-image: url('../../assets/images/1462466500644.jpg');
}

The production environment will automatically add it hash, and the path is correct

The following incorrect usage, using the absolute path can be displayed normally in the development environment, but it will cause the packaged path to be incorrect

.imgText {
  background-image: url('src/assets/images/1462466500644.jpg');
}

Production environment resources 404:

The above is the detailed content of vue3+vite assets dynamically introduce images and solve the problem of incorrect image path not being displayed after packaging. For more information, please follow other related articles on the PHP Chinese website!