vue3+vite动态引入图片方式

import imgUrl from './img.png'
document.getElementById('hero-img').src = imgUrl

const bgImage = ref<string>("");
const bgImageFunc = (url: string) =>
  import(url).then((res: any) => {
    bgImage.value = res.default;
  });
// 使用
bgImageFunc("../../assets/images/bg/bg.jpg");

/**
 * <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");

/**
 * <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");

import tyarticle_iconpe from '@/assets/images/home_icon/brochure_icon.png'

new URL(`/src/assets/images/home_icon/name_icon`, import.meta.url).href