Vue3使用src动态引入本地图片的详细步骤
1. vue-cli搭建的项目
在项目中我们想要动态引入本地图片的时候，（注意这是在cli搭建的，vite里面没有require(),vite里面需要封装个工具）
- 通过v-bind动态绑定
- 通过的require引入
require作用
- 用于引入模板、JSON、或本地文件
下面这种require直接包裹全部路径是可以的，但是我在想感觉不太优雅
想直接在src里用require(item.imageActive)这样思路是没有错的，但是require是引入路径这里我们需要给它拼接上路径(直接进行红字部分是错误的)
我们需要给它拼接一下，一定是不能直接传入变量，不然无法解析
这样就可以啦
不能直接require(item.path)
原因：
参考资料： assets：在项目编译的过程中会被webpack处理解析为模块依赖，只支持相对路径的形式，加载图片模块通过webpack的url-loader加载器来实现，url-loader是解析不了动态绑定的src的导致最终显示的地址是未处理的地址，因此动态绑定src时要通过加载模块的方式去加载这个图片 使用require(“ ”)
具体的话我现在还不是特别理解
还有vue-cli下assets和static文件夹的区别
（这个地方后面会去学习一下，我觉得要学一下webpack（个人拙见，我还不太了解QAQ））
2.vite搭建的项目动态引入本地图片
由于vite里面没有require(), 所以需要封装个工具
如下面这种工具（codewhy老师封装的，why老师yyds）再在引用一下就可以了
export const getAssetURL = (image) => {
// 参数一: 相对路径
// 参数二: 当前路径的URL
return new URL(`../assets/img/${image}`, import.meta.url).href
}
完成
补充：vue3加载动态图片
一、动态加载图片
使用new URL(url, import.meta.url)
<template>
<div class="home">
<img :src="getImageUrl()" alt="" />
</div>
</template>
<script lang="ts">
export default {
name: 'HomeIndex',
setup() {
const getImageUrl = () => {
// 里面可以根据需求写逻辑
return new URL('../assets/img/home/container_bg.png', import.meta.url).href;
};
return { getImageUrl };
},
};
</script>二、动态加载背景图
2.1 style中设置
<template>
<div
class="container"
:style="{
background: 'url(' + getAssetsFile(true) + ') no-repeat',
backgroundSize: '100% 100%',
}"
></div>
</template>
<script lang="ts">
export default {
name: 'HomeIndex',
setup() {
const getAssetsFile = (isAlarm: boolean) => {
const url = isAlarm
? '../assets/img/monitor_alarm_bg.png'
: '../assets/img/monitor_bg.png';
return new URL(url, import.meta.url).href;
};
return { getAssetsFile };
},
};
</script>
<style lang="scss">
.container {
width: 300px;
height: 100px;
}
</style>2.2 修改class
<template>
<div :class="['container', isAlarm ? 'monitor_alarm' : 'monitor_normal']"></div>
</template>
<script lang="ts">
import { ref } from 'vue';
export default {
name: 'HomeIndex',
setup() {
const isAlarm = ref(true);
const getAssetsFile = (isAlarm: boolean) => {
const url = isAlarm
? '../assets/img/monitor_alarm_bg.png'
: '../assets/img/monitor_bg.png';
return new URL(url, import.meta.url).href;
};
return { getAssetsFile, isAlarm };
},
};
</script>
<style lang="scss">
.container {
width: 300px;
height: 100px;
}
.monitor_normal {
background: url(@/assets/img/monitor_bg.png) no-repeat;
background-size: 100% 100%;
}
.monitor_alarm {
background: url(@/assets/img/monitor_alarm_bg.png) no-repeat;
background-size: 100% 100%;
}
</style>
总结
到此这篇关于Vue3使用src动态引入本地图片的文章就介绍到这了,更多相关Vue3 src动态引入本地图片内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
在现代前端开发中,随着应用复杂度的不断提升,组件状态管理成为构建高效、可维护的Vue应用的核心问题,本文将介绍多种管理组件状态的方法,需要的朋友可以参考下2025-03-03
这篇文章主要给大家介绍了关于Vue自定义加水波纹效果指令的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-02-02
在VueRouter中,可以通过动态路由匹配和查询参数`query`来传递参数,并将路由参数或查询参数作为组件的`props`传递,动态路由匹配使用`route.params`访问参数,查询参数使用`route.query`访问,本文给大家介绍Vue Router中获取路由传递过来的参数,感兴趣的朋友一起看看吧2025-02-02
在 Vue 3 中,Proxy 主要用于 拦截对象的基本操作,包括 属性读取（get）、修改（set）、删除（deleteProperty） 等,本文给大家介绍了Vue3使用Proxy构建高效响应式数据的操作教程,需要的朋友可以参考下2025-03-03
下面小编就为大家分享一篇vue.js 微信支付前端代码。具有很好的参考价值。希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了web面试中常问到的关于vue自定义组件及调用方式，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步2021-09-09
在本篇内容里小编给大家分享的是关于vue登录注册的相关实例内容以及写法分析，有需要朋友们可以学习下。2019-09-09
这篇文章主要为大家介绍了html中引入Vue.js的cdn实现简单的文档单页示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
这篇文章主要为大家推荐了一篇值得收藏和学习的vue.js最细致的基础语法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
这篇文章主要介绍了vue el-tree 默认展开第一个节点的实现代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-05-05
最新评论