vite中JS动态引入图片

在HTML中可以使用如下方法获取图片：

<img src="../../assets/bg.png">

但是我们想要在JS中获取图片怎么办？

vue2

在vue2中可以使用require来获取图片

let url=require("./assets/logo.png")
console.log(url);

输出结果是一个base64图片格式

vue3

1. 方法一

   在vue3中使用require会报错ReferenceError: require is not defined，这是因为vite中不支持这个写法了，vite中静态资源的引入方法已改变[https://cn.vitejs.dev/guide/assets.html#new-url-url-import-meta-url]。

   虽然可以直接import引入，在开发环境下有一个提示，在生产环境下可能会出错。

    import defaultUrl from '@/assets/image/default.jpg'
   

   所以使用以下的方法：

   <img :src="defaultUrl">
   <script>
   const defaultUrl=new URL("@/assets/image/default.jpg",import.meta.url).href
   </script>
   

   • new URL()返回一个URL对象，new URL(url,[base])第一个参数是一个静态路径，第二个参数设置后返回一个URL对象

   • import.meta是当前模块的信息，里面有一个url属性，表示当前的url

     现在打印一下new URL("@/assets/image/default.jpg",import.meta.url)这个新的URL对象，里面有一个href属性就是图片路径，这样无论什么时候都是正确地路径。

2. 方法二

   import.meta.glob 是 Vite 提供的一种特殊的 API，用于获取符合某种路径模式的所有文件，并自动导入这些文件。

   @ 是 Vite 配置的别名，通常指向 src 目录，因此 @/assets/image/**/* 实际上是匹配 src/assets/image/ 目录下的所有文件。

   eager: true 是一个选项，它告诉 Vite 立即加载（预加载）所有匹配的模块，而不是等到它们被访问时才动态加载。

   const getImage = (name) => {
       const glob = import.meta.glob(`@/assets/images/**/*`, { eager: true })
       console.log(glob);
     	// 假设传入的name为bg.jpg 输出的就是图片路径/src/assets/images/bg.jpg
   		console.log( glob[`/src/assets/images/bg.jpg`]["default"])
       return glob[`/src/assets/images/${name}`]["default"]
   }
   

   可以看到glob是所有/src/assets/images/文件夹下的所有模块，里面的default属性就是图片的路径名。