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

最新推荐文章于 2025-01-04 16:58:25 发布

开发那点事儿~

最新推荐文章于 2025-01-04 16:58:25 发布

阅读量1.7k

点赞数

分类专栏： javascript 前端开发文章标签： javascript vue.js

本文链接：https://blog.csdn.net/m0_58293192/article/details/129299291

版权

前端开发同时被 2 个专栏收录

93 篇文章 7 订阅

订阅专栏

javascript

34 篇文章 0 订阅

订阅专栏

在Vue3中，由于require不再支持，可以使用import.meta.url结合newURL来引入图片。文章展示了如何创建一个图片数组，并通过import.meta.url获取当前模块的路径，然后拼接成完整图片路径进行使用。

摘要由CSDN通过智能技术生成

// 在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