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从零实现一个消息通知组件的方法,结合实例形式分析了vue实现消息通知组件的具体原理、实现步骤、与相关操作技巧,需要的朋友可以参考下2020-03-03
本篇文章主要介绍了vue-router 路由元信息，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
在Vue中，computed属性是一种计算属性，它的值是根据其他数据的值动态计算出来的，下面小编主要来和大家聊聊Vue 3的组合式API中如何使用computed属性，感兴趣的小伙伴快跟随小编一起了解一下吧2023-06-06
这篇文章主要介绍了Vue3 全局实例上挂载属性方法，本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-05-05
这篇文章主要给大家介绍了关于vue-cli脚手架打包静态资源请求出错的原因与解决方法，文中通过示例代码介绍的非常详细，对大家学习或者使用vue-cli具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-06-06
这篇文章主要介绍了对 Vue-Router 进行单元测试的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
这篇文章主要介绍了Vue3中使用i18n,this.$t报错问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
本文主要介绍了vue实现echart饼图legend显示百分比的方法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要介绍了vue router 用户登陆功能的实例代码,主要用到H5中的会话存储（sessionStorage）、vue-router路由前置操作、路由元信息(meta)等知识点，本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2019-04-04
最近需要做一个el-table的表格,表头需要显示提示信息,本文主要介绍了ElementUI中el-table表格组件如何自定义表头,具有一定的参考价值,感兴趣的可以了解一下2023-09-09
最新评论