How does Vue3+TypeScript+Vite use require to dynamically introduce static resources such as images?

Question: How to use require to dynamically introduce static resources such as images in a Vue3 TypeScript Vite project!

Description: When developing a project today (the project framework is Vue3 TypeScript Vite), we need todynamically introduce static resources, which is the img tag The src attribute value is obtained dynamically. According to the past practice, it can be introduced directly by require. The following code:

<img  class="demo" :src="require(`../../../assets/image/${item.img}`)" / alt="How does Vue3+TypeScript+Vite use require to dynamically introduce static resources such as images?" >

Write the wavy line in the following code to report an error. The error message is:

Name "require" not found. Do you need to install type definitions for node? Try using npm i --save-dev @types/node. ts(2580)

After npm i --save-dev @types/node installation and TypeScript configuration filetsconfig.json Added the configuration item "type":["node"] and then the wavy line prompt disappeared, but the browser console still reported an error , the error message is as follows:

Solution:

Let’s talk about the conclusion first, You cannot use require to introduce image resources in vite, Because the require here seems to be a loading capability provided by webpack. Since we are not using webpack as the project construction tool, we are using Vite, so we must switch to the static resource loading provided byVite. , Vite’s official instructions on this part are here. Interested friends can read the official documentation: Static resource processing in Vite;

Here we are refining To explain, the usage of the example on the official website is as follows:

const imgUrl = new URL('./img.png', import.meta.url).href
document.getElementById('hero-img').src = imgUrl

It may not be easy to understand. Simply put, new URL receives a total of two parameters. The first parameter is the image Path , here is the value corresponding to require. The second parameter is a global variable of vite, which can be understood as directly hard-coding import.meta.url, and put it into the project as follows:

<img  class="t-desktop-icon" :src="getIcon(name)" / alt="How does Vue3+TypeScript+Vite use require to dynamically introduce static resources such as images?" >

Dynamicly introduce it on the img of template, the getIcon method is as follows

function getIcon(name: string) {
    return new URL(`../../../../assets/images/svg/${name}`, import.meta.url).href;
}

This way you can dynamically introduce static resources such as images into Vue3 TypeScript Vite

The above is the detailed content of How does Vue3+TypeScript+Vite use require to dynamically introduce static resources such as images?. For more information, please follow other related articles on the PHP Chinese website!