vant学习踩坑记录3 获取绝对路径的方法

最新推荐文章于 2022-11-12 22:00:00 发布
最新推荐文章于 2022-11-12 22:00:00 发布
阅读量399 收藏
点赞数
分类专栏： 自学记录 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51634734/article/details/114782028
版权

有些时候 vue 引用时需要绝对路径, 有两种解决方法

@/路径

vue给出的@/, 相当于src/的绝对路径

_dirname, 相对路径

path.join(_dirname, 相对路径) 可以将相对路径转换成绝对路径

不过使用前, 需要先引入 path :

var path = require('path')
weixin_51634734
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vant的安装和引入
qq_52722039的博客
04-29 4856
Vant ( ˈvænt ) 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库，提供了一整套 UI 基础组件和业务组件。 通过 Vant，可以快速搭建出风格统一的页面，提升开发效率。 目前已有近50个组件，这些组件被广泛使用于有赞的各个移动端业务中。 如果你需要开发一个移动商城，用 Vant 就再合适不过了。 npm i vant -S ：这是简写形式。 npm install vant --save :这是完整写法。 如果你网络很慢的话，可以使用淘宝的源，但是不建议使用cnpm来进行安装。 安装好v
vue3+ts+vite中配置“@“绝对路径
学而不思则罔
07-19 2106
【代码】vue3+ts+vite中配置"@"绝对路径。
vue中require引入图片或背景图
seimeii的博客
12-09 1万+
<template> <div class="vote-container"> <div class="img" :style="{backgroundImage:'url('+src+')'}"></div> <img :src="src" /> </div> </template> <script> export default { data() { retur
Vue项目引用相对路径图片不显示问题
guoyp2126的博客
05-08 1701
通常将图片放入src/assets/文件夹下，在view中绑定图片，如： <van-image round width="2rem" height="2rem" :src="headerUrl" /> headerUrl是VM定义的图片路径，代码如下： data () { return { headerUrl: '../assets/images/unlogin.png', } } 界面上图片不显示，解决办法，修改data中代码如下即可显示 data ()
引入本地图片路径不显示（在data选项中或动态给src赋值）&vant组件file对象可直取base64
qq_38969618的博客
02-22 1804
解法（图片放在src目录的assets目录下）：通过require("本地图片路径")或import（"本地图片路径"）方法引入。 eg. require('../../assets/icons/test.png') Tips：vant上传组件的file对象（file.content是base64图片，可直接赋值给图片的src）:eg.this.src=file.content; ...
微信小程序npm引入vant-weapp的踩坑记录
12-01
微信小程序项目使用npm安装vant-weapp的正确步骤  使用npm安装vant-weapp 到项目根目录下： npm i vant-weapp -S --production 然后再详情中选中使用npm模块，然后点击工具栏中的构建npm。本以为这样就可以安装...
vant-开发设计学习记录
最新发布
01-16
本学习记录将深入探讨 Vant 的核心概念、组件使用以及开发实践。 首先，Vant 提供了丰富的组件库，包括导航（Tabbar、Steps、Swipe）、表单（Input、Checkbox、Radio）、展示（Cell、Image、Popup）、布局（Grid、...
Taro引入vant Weapp的方法
01-08
Taro(V2.0.5)中引入Vant Weapp，（需下载资源到项目中：大小约322KB） 需如下几步： 1.在/src/components下新建文件夹vant-weapp 2.在github上找到Vant-weapp下载文件包，将对应的dist文件夹下内容复制到新建的vant-...
vue+cli3+vant.zip
04-22
这些文件共同构成了一个基本的Vue+CLI3+Vant的项目结构，为开发H5应用提供了稳定的环境和良好的开发体验。开发者可以基于此框架快速开发出响应式的前端应用，并通过Vue Router进行页面间的跳转，利用axios处理数据...
Vue进阶（贰零肆）：vant van-image无法读取本地图片
IT全栈 华强工作室
11-29 5065
vant中的van-image组件的src当要引用本地的图片时，直接写图片的路径在vue项目中会刷不出图片（但用标签可以显示 ）。
【vant】爬坑引用本地图片
易小花的博客
08-06 3217
[vant]爬坑image 最近因为项目需求要利用vant引用本地图片，但是我发现，我死活引用不上本地图片，老是找不到图片，试了n多方法，我真的是欲哭无泪啊。然后我又查了很多文档，发现还是木有用。简直了，一遇到调用图片的，我真的是瑟瑟发抖，害怕。 话不多说了，进入正题。 一开始我是这么写的，对于路径问题，嗯，遵循不报找不到的错就好，至于原理，我还真没深究过。 <div class="boximg"> <img src="../assets/hahaha.png"> </div
vant库 van-image标签无法引用本地图片
Blablabla_的博客
10-25 1万+
如果把van-swipe-item写成for循环，内部的van-image标签无法使用本地图片，解决办法： 1.把van-image标签换成img，去掉for循环的使用 <van-swipe :loop="false" @change="onChange"> <van-swipe-item> <img src="../../asse...
vant库 van-image标签 引用本地图片
qq_43542074的博客
09-04 3万+
问题： vant中的van-image组件的src参数默认为图片的网络链接（如下所示） <van-image width="100" height="100" src="https://img.yzcdn.cn/vant/cat.jpeg" /> 当要引用本地的图片时，直接写图片的路径在vue项目中会刷不出图片（但用 <img> 标签可以显示 ）。 解决方法：...
Vant组件库 引入 阿里矢量图 添加自己喜欢的 ICON
Itmei的博客
11-12 2992
网址内容如下，其中src:url内的网址是阿里矢量图CDN的地址,为了稳定我们可以自己把文件下载下来保存到项目中。内容复制进去，这个时候url提示报错我们需要引入相关文件，引入的文件都在下载的文件夹中。当然你也可以使用官方的CDN镜像，只要把链接内容复制到保存成。文件,当然你们也可以保存成.css文件由于我系统文件使用的是。使用因为图标是自定义的所以要看官网自定义要如何修改。在main.js文件导入我们的文件。并且设置相对路径把导入的文件引入。在项目中创建文件，并且把。如我要使用阿里矢量图中的。
vue3+vite的项目如何将打包后的绝对路径改为相对路径
Oliver尹的博客
07-18 9672
vue3+vite的项目如何将打包后的绝对路径改为相对路径
vue中data中定义图片相对路径页面不显示问题
彳亍的博客
11-18 2843
vue在data中定义图片相对路径： data() { return { active: 1, icon: { active: "../assets/images/home-selected.png", inactive: "../assets/images/home.png" } }; } 页面使用va...
vant 中使用cell组件 定义图标该图片和位置
weixin_42423062的博客
04-04 2万+
@本来想直接使用icon组件，使用阿里的图标库，可是怎么弄也不行，折腾一下午，最后决定使用最笨的办法，直接上代码 vant 中使用cell组件 定义图标该图片和位置像微信信息栏一样 <div> <van-cell-group class="vanCellGroupClass"><!--../../assets/tou.png--> &...
vantUI框架在vue项目中的应用踩坑
热门推荐
milli236的博客
07-23 4万+
细节未完善。参考地址编辑方面的应用。 1.订单提交地址等组件的应用。 使用的组件有如下： import {Card,button,Toast,AddressList,Popup,AddressEdit,Area} from 'vant' 主要是配货地址编辑这块； &lt;van-address-edit :area-list="area...
vue3怎么createApp方法挂载vant的组件
03-29
要在Vue3中使用Vant组件，需要先安装Vant： ``` npm install vant -S ``` 然后，在main.js中引入Vant： ``` import { createApp } from 'vue' import Vant from 'vant'; import 'vant/lib/index.css'; import ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值