vue3+vite 动态引用静态资源及动态引入assets文件夹图片的多种方式
更新时间：2023年10月11日 15:02:00 作者：我总是词不达意
通过require动态引入, 发现报错：require is not defind,这是因为 require 是属于 Webpack 的方法,本文给大家介绍vue3+vite 动态引用静态资源及动态引入assets文件夹图片的多种方式,感兴趣的朋友一起看看吧
这里我们先假设：
静态文件目录：src/assets/images/
我们的目标静态文件在：src/assets/images/home/home_bg.png
<img :src="require('@/assets/images/home/home_bg.png')" />通过require动态引入， 发现报错：
require is not defind，这是因为 require 是属于 Webpack 的方法
第一种方式（适用于单个资源文件）
import homeBg from 'src/assets/images/home/home_bg.png' <img :src="homeBg" />
第二种方式（适用于多个资源文件，动态传入文件路径）
new URL() + import.meta.url
在src目录下创建一个util文件夹，文件夹里创建一个utils.ts文件
// 获取assets静态资源
const getAssetsFile = (url: string) => {
return new URL(`../assets/images/${url}`, import.meta.url).href;
};
export default {
getAssetsFile,
};在vue文件中导入
<script setup lang="ts"> import util from 'src/util/utils' </script>
使用方式
<template>
<img class="bg-img" :src="util.getAssetsFile('bg.png')" alt="">
</template>第三种方式（适用于多个资源文件，这种方式引入的文件必须指定到具体文件夹路径，传入的变量中只能为文件名，不能包含文件路径）
例如在assets/images文件下还有一个home文件夹
// 获取assets静态资源
const getAssetsFile = (url: string) => {
const path = `../assets/images/home/${url}`;
const modules = import.meta.glob("../assets/images/home/*");
return modules[path].default;
};
export default {
getAssetsFile,
};<script setup lang="ts"> import util from 'src/util/utils' </script>
<template>
<img class="bg-img" :src="util.getAssetsFile('bg.png')" alt="">
</template>如果是背景图片引入的方式（一定要使用相对路径）
.bg-box{
background-image: url('../../assets/images/bg.png');
}到此这篇关于vue3+vite 动态引用静态资源，动态引入assets文件夹图片的几种方式的文章就介绍到这了,更多相关vue3 vite 动态引用静态资源内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vue.config.js文件devServer字段的常用选项详解
在 Vue CLI 生成的 vue.config.js 文件中,devServer 字段用于配置开发服务器的选项,本文给大家介绍vue.config.js文件devServer字段的常用选项,感兴趣的朋友一起看看吧2023-11-11
vxe-table表格组件,编辑单元格详解(el-table组件同样适用)
这篇文章主要介绍了vxe-table表格组件,编辑单元格详解(el-table组件同样适用),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-04-04
这篇文章主要介绍了vue引入js数字小键盘的实现代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下2018-05-05
router-view组件作为vue最核心的路由管理组件,在项目中作为路由管理经常被使用到,本文主要为大家详细介绍了router-view具体使用,希望对大家有所帮助2023-12-12
下面小编就为大家分享一篇vue2.0.js的多级联动选择器实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要为大家详细介绍了Vue实现步骤条效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
在Vue应用中，通常需要将一些状态进行持久化，以便在用户关闭浏览器或刷新页面后，常见的方法就是LocalStorage和SessionStorage，所以本文就来讲讲这两种方法的具体实现吧2023-06-06
在项目开发过程中,我们经常会用到svg矢量图,本文主要介绍了vue3中引入svg矢量图的实现示例,具有一定的参考价值,感兴趣的可以了解一下2023-11-11
Vue.js 是一个流行且强大的 JavaScript 框架,它允许我们构建动态和交互式 Web 应用程序,本文我们将深入探讨 Vue.js 应用程序中内存泄漏的原因,并探索如何定位和修复这些问题的有效策略,希望对大家有所帮助2023-09-09
Vue推荐使用模板,但需用render函数在高级场景下直接生成VNode,通过createElement参数控制虚拟DOM,适合复杂动态UI和高阶组件,性能更高但需权衡可读性,本文给大家介绍vue渲染函数render的使用,感兴趣的朋友一起看看吧2025-06-06
最新评论