vue3+vite动态引入图片

一、 说明

在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("");
const bgImageFunc = (url: string) =>
  import(url).then((res: any) => {
    bgImage.value = res.default;
  });

// 使用
bgImageFunc("../../assets/images/bg/bg.jpg");

方式二

使用vite官方提供的方式

/**
 * 
 获取加载图片地址 
 * 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 提供的方法

/**
 * 
 获取加载图片地址 
 * examples: /src/assets/bg/bg.png
 * @param url: string
 *
 */
export const useFile = (url: string) => {
  const modules: Record = 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");

以上三种方式可以任选一种即可