Vue里面用v-bind绑定一个src,里面能否用相对路径呢 5C

这是我在网上学习的项目,老师用的都是网址一样的绝对路径。写在下面要轮播的imgUrl里,这样没有问题,但是如果我用现在的相对路径就不行了,图片显示不出来,从电脑上本地开始的绝对路径也不行,路径直接出现在html上面了,如果不用v-bind就还可以,请问有解决的办法吗

<template>
    <div class="warpper">
        <swiper :options="swiperOption">
    <!-- slides -->
    <swiper-slide v-for="item of swiperList" :key="item.id"><img class="swiper-img" src="F:\html5\mukeVUE\classic APP\Travel\travel\src\assets\swiper2.jpg"></swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
</div>
</template>

<script>
export default {
    name: 'HomeSwiper',
    data: function(){
        return {
            swiperOption: {
                pagination:'.swiper-pagination'
            },
            swiperList: [{
                id: '0001',
                imgUrl: '../../../assets/swiper1.jpg'
            }, {
                id: '0002',
                imgUrl: '../../../assets/swiper2.jpg'
              }]
        }
    }
}

图片说明

4个回答

典型问题,如果在vue的data里写图片的相对路径的话,请使用require()。示例:

imgUrl: require('../../../assets/swiper1.jpg')

因为v-bind把后面的值作为了一个变量吧,你先定义一个变量,然后把你的地址赋值给变量,然后v-bind这个变量试试

<img :src="'/static/img/' + fileName">  

src里面的是图片地址 这个地址必须是你浏览器能访问到的 你用这个地址在浏览器新建一个标签测试一下

src里面的是图片地址是你浏览器能访问到的吗

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
Vue.js v-show后面跟v-else
v-show后面跟v-else v-show是false 为什么没有执行v-else里面的语句???
Vue 值为数组时,v-mode绑定问题l
element的选择日期范围,值为一个数组(两个日期元素),如何通过Vue的v-model分别将这个两个元素 绑定到两个属性,如下想通过v-model把两个日期绑定到searchData的reportDateMin和reportDateMax ``` <el-date-picker v-model="??" @change="dateRangePick" type="daterange" align="center" size="small" style="width:250px;" unlink-panels="true" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" :picker-options="pickerOptions"> </el-date-picker> searchData:{ mrrCode:"",userName:"",status:0,location:"",reportDateMin:"",reportDateMax:"" }, ```
vue引用v-chart时候报错
v-chart版本和echart版本都调整过,没有用,求大神帮忙!跪谢 ![图片说明](https://img-ask.csdn.net/upload/201812/12/1544604429_820582.png)
ant-design of vue里面的a-select无法显示notFoundContent绑定的信息
代码如下:<a-form-item label='地址'> <a-select showSearch placeholder="请选择地址" :defaultActiveFirstOption="false" @search="search" :notFoundContent="该地址不存在" @select='select' v-decorator="['name']" > <a-select-option v-for="(d) in data" :key="d.">{{d.name}}</a-select-option> </a-select> </a-form-item> 为什么 :notFoundContent="该地址不存在" 在输入信息错误的情况下,不能显示出‘’该地址不存在这“个提示 请大神指点下。
vue select中使用v-for 然后在嵌套v-if v-if没效果
![图片说明](https://img-ask.csdn.net/upload/201707/01/1498878745_32009.png)
vue中的v-for in问题
比如说,在ul里使用了v-for还要在li里使用v-for并且li里内容不一样该怎么写?
Vue脚手架v-for循环若干个按钮通过事件改变按钮的value。
<div class="button"> <input type="button" v-bind:value="催办" class="button_yes" @click="fn"> </div>
vue 使用v-for循环输出图标
### 使用v-for循环出一排七个不同的图标 ``` <el-row> <el-col :span="3" v-for="(index,item) in 7" style="text-align:center"> <svg-icon icon-class="user" ></svg-icon> </el-col> </el-row> ``` ####大致代码这个样子的,但是不太懂数据绑定啥的,求大神指点一下萌新
vue使用v-for循环直接使用方法获得的数组问题
vue使用v-for循环直接使用方法获得的数组,代码 ``` <div id="test"> <select placeholder="请选择"> <template v-for="(item,index) in getList('a')"> <option v-if="item" :label="item" :value="item"></option> </template> </select> <input v-model="str"/> </div> <script> var test = new Vue({ el:"#test", data:{ arr:{ a:[1,2,3,4], b:[5,6,7,8] }, str:"" }, methods:{ getList:function(name){ return this.arr[name] } } }) </script> ``` 像这样,只要整个test发生变化就会调用getList方法,就比如我在input输入也会调用getList,各位大神有解决方法吗
在vue中使用element-ui时, SyntaxError: export declarations may only appear at top level of a module
这是我调用的代码: ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 先引入vue.js --> <script src="node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script> <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 引入组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> </head> <body> <div id="app"> <template> <el-checkbox-group v-model="checkedCities1" :min="1" :max="2"> <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox> </el-checkbox-group> </template> </div> <script type="text/javascript"> const cityOptions = ['上海', '北京', '广州', '深圳']; export default { data() { return { checkedCities1: ['上海', '北京'], cities: cityOptions }; } }; new Vue({ el:'#app', data:{ } }) </script> </body> </html> ``` 这是element-ui官方的模板: ![图片说明](https://img-ask.csdn.net/upload/201902/24/1551010099_972895.png) 请问:我写的方式不对吗
vue里用v-for循环出来的图片在:style重新赋值backgroundPosition的值
<li v-for="(item, index) in demoList" :key="index"> <span :style="{backgroundImage: 'url(' + item.bgImg+ ')', backgroundPositionX: index*-32 + 'px', backgroundPositionY: index*-32 + 'px'}"></span> </li> 上面这个图片循环出来后关于计算定位的问题,每循环出来一个图片我就要通过下标值就要给(backgroundPositionX)重新赋予一个没有规律的值,请问这个怎么做
vue写的一个鼠标移入显示提示信息的demo中v-show的问题。
最近新学vue.js,写了个demo是鼠标移入显示提示信息的,但是最后无论如何提示信息都显示,很奇怪,调试的时候发现值seen是变化的,也就是鼠标移入时为true,移除为false。但就是v-show这里不正常,代码如下: ![图片说明](https://img-ask.csdn.net/upload/201705/08/1494235244_373288.png) 而且在chrome下用调试工具看了发现也有问题,v-show都没有被解析而且id为remember的p标签应该是包含了后面的class为note 的p标签的,结果竟然在浏览器中自动补全了,使得两个p标签同级了。图如下:![图片说明](https://img-ask.csdn.net/upload/201705/08/1494235446_582552.png)
vue v-for 如何才能给每个子元素绑定不同的属性
![图片说明](https://img-ask.csdn.net/upload/201909/16/1568595472_418594.png) 循环输出的子元素 ,已生成的房间数为例,我想实现的是 为每个子元素绑定 不同的 v-model 然后监听v-model来控制每一层的房间数v-model。有没有大佬知道有没有方法实现
如何在vue实例化对象中获取组件中绑定的自定义的属性
如何在vue实例化对象中获取组件中绑定的自定义的属性 <combo v-bind:step="5"> var vm=new Vue({ 如何获取step值 })
vue-cli ant-design-vue 日期组件显示不了中文
在app.vue 里面已经设置了 ``` <a-locale-provider :locale="locale"> <div id="app"> <router-view/> </div> </a-locale-provider> import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'; import 'moment/locale/zh-cn'; moment.locale('zh-cn') data() { return { locale: zhCN } } ```![图片说明](https://img-ask.csdn.net/upload/201907/19/1563528533_76414.png)
Vue用v-for循环渲染数组数据,数组数据更新时,视图没有更新
Vue用v-for循环渲染数组数据,数组数据更新时,视图没有更新,filter,和变异方法都试过了,好像都不行,看网上有说是重复实例化vue的原因,但是不太明白。 ![图片说明](https://img-ask.csdn.net/upload/201709/07/1504762347_121687.png) html是这样的 ![图片说明](https://img-ask.csdn.net/upload/201709/07/1504751164_800070.png) 要实现的是,点击触发but()方法,然后ajax获取数据,用v-for循环渲染出来。现在的问题是,第一次拿到数据可以正常渲染,当第二次触发方法时,ajax重新获取到新数据,vue中的data也已经改变了,但是页面上没改变。没弄懂怎么回事。
VUE V-TABLE 中始终会出现纵向滚动条
VUE V-TABLE 中始终会出现滚动条 (被隐藏的区域高度为 176px, 怀疑是否为分页偏移或者footer) 但是文档上面没有看到描述如何去除 ![图片说明](https://img-ask.csdn.net/upload/201912/31/1577765122_971852.png) 如图table,代码为: ``` <v-table is-horizontal-resize style="width:100%; height:420px;" even-bg-color="#f2f2f2" row-hover-color="#eee" row-click-color="#edf7ff" :columns="Ordercolumns" :table-data="Ordertablerows" :select-all="selectALL" :select-change="selectChange"></v-table> ``` ![图片说明](https://img-ask.csdn.net/upload/201912/31/1577765612_4254.png)
vue中使用element-ui,使用路由功能时报错。
``` <script> import $ from "jquery"; import router from "vue-router"; export default { name:'app', router, components:{}, mounted(){ $(".navLeft").height($(window).height()-50); } }; </script> ``` 上面是App.vue中的js代码。 ``` <el-menu :router="true" background-color="#F5F5F5" class="el-menu-vertical-demo" default-active="1"> <el-submenu index="/user"> <template slot="title"> <i class="el-icon-user"/> <span>用户管理</span> </template> <el-menu-item-group> <el-menu-item index="/user/findAll"><i class="el-icon-setting"/>查看用户信息</el-menu-item> <el-menu-item index="/user/addUser"><i class="el-icon-setting"/>添加用户信息</el-menu-item> <el-menu-item index="/user/modifyUser"><i class="el-icon-setting"/>修改用户信息</el-menu-item> <el-menu-item index="/user/deleteUser"><i class="el-icon-setting"/>删除用户信息</el-menu-item> </el-menu-item-group> </el-submenu> </el-menu> ``` 上面是html模板,使用的是导航栏,想在导航栏中使用路由功能,但是在点击导航菜单的时候提示“element-ui.common.js”的3376行报错。 ![图片说明](https://img-ask.csdn.net/upload/202001/12/1578821090_812757.png) 请问这个该怎么解决? 网上找了好多,都不是这种的。
Vue.js 使用element-ui 做走马灯,图片一直显示不出来
``` <template> <div id="app" class="block"> <span class="demonstration">Click 指示器触发</span> <el-carousel trigger="click" height="300px"> <el-carousel-item v-for="(img,index) in imgList" :key="index"> <img v-bind:src="img.url"> </el-carousel-item> </el-carousel> </div> </template> ``` 代码一直都是拷贝官网的,url也一直能得到,但是图片打死获取不到,不涉及动态资源图片就是本地的几张图片![图片说明](https://img-ask.csdn.net/upload/201803/12/1520817865_289812.jpg)
Kafka实战(三) - Kafka的自我修养与定位
Apache Kafka是消息引擎系统,也是一个分布式流处理平台(Distributed Streaming Platform) Kafka是LinkedIn公司内部孵化的项目。LinkedIn最开始有强烈的数据强实时处理方面的需求,其内部的诸多子系统要执行多种类型的数据处理与分析,主要包括业务系统和应用程序性能监控,以及用户行为数据处理等。 遇到的主要问题: 数据正确性不足 数据的收集主要...
volatile 与 synchronize 详解
Java支持多个线程同时访问一个对象或者对象的成员变量,由于每个线程可以拥有这个变量的拷贝(虽然对象以及成员变量分配的内存是在共享内存中的,但是每个执行的线程还是可以拥有一份拷贝,这样做的目的是加速程序的执行,这是现代多核处理器的一个显著特性),所以程序在执行过程中,一个线程看到的变量并不一定是最新的。 volatile 关键字volatile可以用来修饰字段(成员变量),就是告知程序任何对该变量...
Java学习的正确打开方式
在博主认为,对于入门级学习java的最佳学习方法莫过于视频+博客+书籍+总结,前三者博主将淋漓尽致地挥毫于这篇博客文章中,至于总结在于个人,实际上越到后面你会发现学习的最好方式就是阅读参考官方文档其次就是国内的书籍,博客次之,这又是一个层次了,这里暂时不提后面再谈。博主将为各位入门java保驾护航,各位只管冲鸭!!!上天是公平的,只要不辜负时间,时间自然不会辜负你。 何谓学习?博主所理解的学习,它是一个过程,是一个不断累积、不断沉淀、不断总结、善于传达自己的个人见解以及乐于分享的过程。
程序员必须掌握的核心算法有哪些?
由于我之前一直强调数据结构以及算法学习的重要性,所以就有一些读者经常问我,数据结构与算法应该要学习到哪个程度呢?,说实话,这个问题我不知道要怎么回答你,主要取决于你想学习到哪些程度,不过针对这个问题,我稍微总结一下我学过的算法知识点,以及我觉得值得学习的算法。这些算法与数据结构的学习大多数是零散的,并没有一本把他们全部覆盖的书籍。下面是我觉得值得学习的一些算法以及数据结构,当然,我也会整理一些看过...
有哪些让程序员受益终生的建议
从业五年多,辗转两个大厂,出过书,创过业,从技术小白成长为基层管理,联合几个业内大牛回答下这个问题,希望能帮到大家,记得帮我点赞哦。 敲黑板!!!读了这篇文章,你将知道如何才能进大厂,如何实现财务自由,如何在工作中游刃有余,这篇文章很长,但绝对是精品,记得帮我点赞哦!!!! 一腔肺腑之言,能看进去多少,就看你自己了!!! 目录: 在校生篇: 为什么要尽量进大厂? 如何选择语言及方...
大学四年自学走来,这些私藏的实用工具/学习网站我贡献出来了
大学四年,看课本是不可能一直看课本的了,对于学习,特别是自学,善于搜索网上的一些资源来辅助,还是非常有必要的,下面我就把这几年私藏的各种资源,网站贡献出来给你们。主要有:电子书搜索、实用工具、在线视频学习网站、非视频学习网站、软件下载、面试/求职必备网站。 注意:文中提到的所有资源,文末我都给你整理好了,你们只管拿去,如果觉得不错,转发、分享就是最大的支持了。 一、电子书搜索 对于大部分程序员...
linux系列之常用运维命令整理笔录
本博客记录工作中需要的linux运维命令,大学时候开始接触linux,会一些基本操作,可是都没有整理起来,加上是做开发,不做运维,有些命令忘记了,所以现在整理成博客,当然vi,文件操作等就不介绍了,慢慢积累一些其它拓展的命令,博客不定时更新 free -m 其中:m表示兆,也可以用g,注意都要小写 Men:表示物理内存统计 total:表示物理内存总数(total=used+free) use...
比特币原理详解
一、什么是比特币 比特币是一种电子货币,是一种基于密码学的货币,在2008年11月1日由中本聪发表比特币白皮书,文中提出了一种去中心化的电子记账系统,我们平时的电子现金是银行来记账,因为银行的背后是国家信用。去中心化电子记账系统是参与者共同记账。比特币可以防止主权危机、信用风险。其好处不多做赘述,这一层面介绍的文章很多,本文主要从更深层的技术原理角度进行介绍。 二、问题引入 假设现有4个人...
GitHub开源史上最大规模中文知识图谱
近日,一直致力于知识图谱研究的 OwnThink 平台在 Github 上开源了史上最大规模 1.4 亿中文知识图谱,其中数据是以(实体、属性、值),(实体、关系、实体)混合的形式组织,数据格式采用 csv 格式。 到目前为止,OwnThink 项目开放了对话机器人、知识图谱、语义理解、自然语言处理工具。知识图谱融合了两千五百多万的实体,拥有亿级别的实体属性关系,机器人采用了基于知识图谱的语义感...
程序员接私活怎样防止做完了不给钱?
首先跟大家说明一点,我们做 IT 类的外包开发,是非标品开发,所以很有可能在开发过程中会有这样那样的需求修改,而这种需求修改很容易造成扯皮,进而影响到费用支付,甚至出现做完了项目收不到钱的情况。 那么,怎么保证自己的薪酬安全呢? 我们在开工前,一定要做好一些证据方面的准备(也就是“讨薪”的理论依据),这其中最重要的就是需求文档和验收标准。一定要让需求方提供这两个文档资料作为开发的基础。之后开发...
网页实现一个简单的音乐播放器(大佬别看。(⊙﹏⊙))
今天闲着无事,就想写点东西。然后听了下歌,就打算写个播放器。 于是乎用h5 audio的加上js简单的播放器完工了。 演示地点演示 html代码如下` music 这个年纪 七月的风 音乐 ` 然后就是css`*{ margin: 0; padding: 0; text-decoration: none; list-...
微信支付崩溃了,但是更让马化腾和张小龙崩溃的竟然是……
loonggg读完需要3分钟速读仅需1分钟事件还得还原到昨天晚上,10 月 29 日晚上 20:09-21:14 之间,微信支付发生故障,全国微信支付交易无法正常进行。然...
Python十大装B语法
Python 是一种代表简单思想的语言,其语法相对简单,很容易上手。不过,如果就此小视 Python 语法的精妙和深邃,那就大错特错了。本文精心筛选了最能展现 Python 语法之精妙的十个知识点,并附上详细的实例代码。如能在实战中融会贯通、灵活使用,必将使代码更为精炼、高效,同时也会极大提升代码B格,使之看上去更老练,读起来更优雅。
数据库优化 - SQL优化
以实际SQL入手,带你一步一步走上SQL优化之路!
2019年11月中国大陆编程语言排行榜
2019年11月2日,我统计了某招聘网站,获得有效程序员招聘数据9万条。针对招聘信息,提取编程语言关键字,并统计如下: 编程语言比例 rank pl_ percentage 1 java 33.62% 2 cpp 16.42% 3 c_sharp 12.82% 4 javascript 12.31% 5 python 7.93% 6 go 7.25% 7 p...
通俗易懂地给女朋友讲:线程池的内部原理
餐盘在灯光的照耀下格外晶莹洁白,女朋友拿起红酒杯轻轻地抿了一小口,对我说:“经常听你说线程池,到底线程池到底是个什么原理?”
《奇巧淫技》系列-python!!每天早上八点自动发送天气预报邮件到QQ邮箱
将代码部署服务器,每日早上定时获取到天气数据,并发送到邮箱。 也可以说是一个小型人工智障。 知识可以运用在不同地方,不一定非是天气预报。
经典算法(5)杨辉三角
杨辉三角 是经典算法,这篇博客对它的算法思想进行了讲解,并有完整的代码实现。
英特尔不为人知的 B 面
从 PC 时代至今,众人只知在 CPU、GPU、XPU、制程、工艺等战场中,英特尔在与同行硬件芯片制造商们的竞争中杀出重围,且在不断的成长进化中,成为全球知名的半导体公司。殊不知,在「刚硬」的背后,英特尔「柔性」的软件早已经做到了全方位的支持与支撑,并持续发挥独特的生态价值,推动产业合作共赢。 而对于这一不知人知的 B 面,很多人将其称之为英特尔隐形的翅膀,虽低调,但是影响力却不容小觑。 那么,在...
腾讯算法面试题:64匹马8个跑道需要多少轮才能选出最快的四匹?
昨天,有网友私信我,说去阿里面试,彻底的被打击到了。问了为什么网上大量使用ThreadLocal的源码都会加上private static?他被难住了,因为他从来都没有考虑过这个问题。无独有偶,今天笔者又发现有网友吐槽了一道腾讯的面试题,我们一起来看看。 腾讯算法面试题:64匹马8个跑道需要多少轮才能选出最快的四匹? 在互联网职场论坛,一名程序员发帖求助到。二面腾讯,其中一个算法题:64匹...
面试官:你连RESTful都不知道我怎么敢要你?
干货,2019 RESTful最贱实践
刷了几千道算法题,这些我私藏的刷题网站都在这里了!
遥想当年,机缘巧合入了 ACM 的坑,周边巨擘林立,从此过上了"天天被虐似死狗"的生活… 然而我是谁,我可是死狗中的战斗鸡,智力不够那刷题来凑,开始了夜以继日哼哧哼哧刷题的日子,从此"读题与提交齐飞, AC 与 WA 一色 ",我惊喜的发现被题虐既刺激又有快感,那一刻我泪流满面。这么好的事儿作为一个正直的人绝不能自己独享,经过激烈的颅内斗争,我决定把我私藏的十几个 T 的,阿不,十几个刷题网...
为啥国人偏爱Mybatis,而老外喜欢Hibernate/JPA呢?
关于SQL和ORM的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行了一番讨论,感触还是有一些,于是就有了今天这篇文。 声明:本文不会下关于Mybatis和JPA两个持久层框架哪个更好这样的结论。只是摆事实,讲道理,所以,请各位看官勿喷。 一、事件起因 关于Mybatis和JPA孰优孰劣的问题,争论已经很多年了。一直也没有结论,毕竟每个人的喜好和习惯是大不相同的。我也看...
白话阿里巴巴Java开发手册高级篇
不久前,阿里巴巴发布了《阿里巴巴Java开发手册》,总结了阿里巴巴内部实际项目开发过程中开发人员应该遵守的研发流程规范,这些流程规范在一定程度上能够保证最终的项目交付质量,通过在时间中总结模式,并推广给广大开发人员,来避免研发人员在实践中容易犯的错误,确保最终在大规模协作的项目中达成既定目标。 无独有偶,笔者去年在公司里负责升级和制定研发流程、设计模板、设计标准、代码标准等规范,并在实际工作中进行...
SQL-小白最佳入门sql查询一
不要偷偷的查询我的个人资料,即使你再喜欢我,也不要这样,真的不好;
项目中的if else太多了,该怎么重构?
介绍 最近跟着公司的大佬开发了一款IM系统,类似QQ和微信哈,就是聊天软件。我们有一部分业务逻辑是这样的 if (msgType = "文本") { // dosomething } else if(msgType = "图片") { // doshomething } else if(msgType = "视频") { // doshomething } else { // doshom...
Nginx 原理和架构
Nginx 是一个免费的,开源的,高性能的 HTTP 服务器和反向代理,以及 IMAP / POP3 代理服务器。Nginx 以其高性能,稳定性,丰富的功能,简单的配置和低资源消耗而闻名。 Nginx 的整体架构 Nginx 里有一个 master 进程和多个 worker 进程。master 进程并不处理网络请求,主要负责调度工作进程:加载配置、启动工作进程及非停升级。worker 进程负责处...
YouTube排名第一的励志英文演讲《Dream(梦想)》
Idon’t know what that dream is that you have, I don't care how disappointing it might have been as you've been working toward that dream,but that dream that you’re holding in your mind, that it’s po...
“狗屁不通文章生成器”登顶GitHub热榜,分分钟写出万字形式主义大作
一、垃圾文字生成器介绍 最近在浏览GitHub的时候,发现了这样一个骨骼清奇的雷人项目,而且热度还特别高。 项目中文名:狗屁不通文章生成器 项目英文名:BullshitGenerator 根据作者的介绍,他是偶尔需要一些中文文字用于GUI开发时测试文本渲染,因此开发了这个废话生成器。但由于生成的废话实在是太过富于哲理,所以最近已经被小伙伴们给玩坏了。 他的文风可能是这样的: 你发现,...
程序员:我终于知道post和get的区别
是一个老生常谈的话题,然而随着不断的学习,对于以前的认识有很多误区,所以还是需要不断地总结的,学而时习之,不亦说乎
相关热词 c#委托 逆变与协变 c#新建一个项目 c#获取dll文件路径 c#子窗体调用主窗体事件 c# 拷贝目录 c# 调用cef 网页填表c#源代码 c#部署端口监听项目、 c#接口中的属性使用方法 c# 昨天
立即提问