一、 说明
在vue2中可以使用require动态引入图片,但在开发vue3+vite项目的时候想要动态的去引入图片来显示,尝试过require 发现报错 require is not defind。因为
require是webpack的方法,而vite是不支持require方法的,vite官网:
服务时引入一个静态资源会返回解析后的公共路径:
import imgUrl from './img.png'
document.getElementById('hero-img').src = imgUrl
例如,imgUrl
在开发时会是 /img.png
,在生产构建后会是 /assets/img.2d8efhg.png
。
行为类似于 Webpack 的 file-loader
。区别在于导入既可以使用绝对公共路径(基于开发期间的项目根路径),也可以使用相对路径。
二、 实现方式
方式一
比较笨的实现方法 使用 import()
const bgImage = ref<string>("");
const bgImageFunc = (url: string) =>
import(url).then((res: any) => {
bgImage.value = res.default;
});
// 使用
bgImageFunc("../../assets/images/bg/bg.jpg");
方式二
使用vite官方提供的方式
/**
* <p> 获取加载图片地址 </p>
* examples: bg/bg.png
* @param imgPath: string
*/
export const requireImg = (imgPath: string) => {
return new URL(`../assets/images/${imgPath}`, import.meta.url).href;
};
// 使用
requireImg("bg/bg.png");
方式三
使用 import.meta.glob 提供的方法
/**
* <p> 获取加载图片地址 </p>
* examples: /src/assets/bg/bg.png
* @param url: string
*
*/
export const useFile = (url: string) => {
const modules: Record<string, any> = import.meta.glob("@/assets/images/**/*.{png,svg,jpg,jpeg}", { eager: true });
if (modules[url]) return modules[url].default;
else {
// 地址错误
console.log("Error url is wrong path");
}
};
// 使用 必须是带有/src 完整目录
useFile("/src/assets/bg/bg.png");
以上三种方式可以任选一种即可