Vue3访问图片资源的几种方式

Vue3访问图片资源

   直接访问：

       此方法需要放在 public 目录下，缺点是无法动态访问。

  <img src="/images/logo.png" />

   import导入：

       此方法为单个导入，缺点是多了就要写一大串。

import imgA from "@/src/assets/xx.png"

   import.meta

       此方法能实现动态导入，缺点是build后如果项目没有部署在服务器上图片就无法访问。

export const imgSrc = (url: string) => {
  return new URL(`../assets/images/${url}`, import.meta.url).href;
};

   import.glob

       此方法能实现动态导入，build后即使没有部署在服务器上，本地直接预览路径也不会出错。

// 导入该路径下的所有图片
const modules = import.meta.glob("/src/assets/Injury/*", {eager: true});
// 传入文件名返回对应的资源路径
const imgSrc = (fileName: string) => {
  if (!fileName) return "";
  const path = `/src/assets/Injury/${fileName}`;
  return modules[path]?.default;
};