vue3+vite动态引入静态资源(动态引入assets文件夹中的图片)

// 在vue3中如果我们通过 require 引入图片会发现报错: require is not defind,因为require是webpack的方法.

<img :src="require('@/assets/images/icon.png')" />

单个资源文件引入就计较简单了,这里就不说了.

主要讲解一下 import.meta以及具体使用:

// 当我们多个地方需要用到图片时,我们可以把这些图片搞成一个数组

const imgList = ref([
    new URL('../assets/images/icon.png', import.meta.url).href,
    new URL('../assets/images/icon2.png', import.meta.url).href,
    new URL('../assets/images/icon3.png', import.meta.url).href,
])
// 使用
<img :src="imgList[0]" alt="图片">
<img :src="imgList[1]" alt="图片">
<img :src="imgList[2]" alt="图片">

// 获取当前模块或文件的路径
import.meta.url

// 将当前模块或文件的路径和图片路径拼接成一个完成的路径
new URL('../assets/images/icon.png', import.meta.url).href 

import.meta 在阮一峰的文章中有讲到

29. 最新提案 - import.meta - 《阮一峰 ECMAScript 6 (ES6) 标准入门教程 第三版》 - 书栈网 · BookStack