Vue批量图片显示时遇到的路径被解析问题


Posted in Javascript onMarch 28, 2019

最近在学Vue,感觉很难理解,学不懂。

昨天晚上开始第一个页面的搭建,脑子感觉通了一点,大概知道该怎么做了。

在放置轮播图时,要调用很多图片,图片路径在data的一个数组里,用v-for循环(因为还不会做轮播图,从网上找的代码)

图片路径是对的,但是不显示,就用普通img标签放了个图片看了一下,这样

Vue批量图片显示时遇到的路径被解析问题

网页上却变成了这样

Vue批量图片显示时遇到的路径被解析问题

于是我把每个图片都放了一次,把每个解析后的地址都粘贴在数组里,成了

Vue批量图片显示时遇到的路径被解析问题

但是这种方法也太蠢了,以后不能也这样办吧

就在网上查了一下,要加一个require,很多帖子里的图片路径都加了个require,那就试试

Vue批量图片显示时遇到的路径被解析问题

成功! 但是不知道是什么原理,大概是把路径的字符串封装起来了?

然后又去查了查require是干啥的,感觉用过 ,但不知道哪里用过

Vue批量图片显示时遇到的路径被解析问题

使用位置

require是运行时调用,所以require理论上可以运用在代码的任何地方

require本质
require是赋值过程,其实require的结果就是对象、数字、字符串、函数等,再把require的结果赋值给某个变量

这样的话就把路径字符串变成变量了

以上所述是小编给大家介绍的Vue批量图片显示时遇到的路径被解析问题详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
this和执行上下文实现代码
Jul 01 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
Nov 21 Javascript
js opener的使用详解
Jan 11 Javascript
JavaScript动态添加列的方法
Mar 25 Javascript
微信小程序 radio单选框组件详解及实例代码
Jan 10 Javascript
如何自动化部署项目?折腾服务器之旅~
Apr 16 Javascript
JS实现滚动条触底加载更多
Sep 19 Javascript
js判断密码强度的方法
Mar 18 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
Jun 04 Javascript
在Vue里如何把网页的数据导出到Excel的方法
Sep 30 Javascript
解决vant-UI库修改样式无效的问题
Nov 03 Javascript
jQuery实现全选按钮
Jan 01 jQuery
微信小程序学习笔记之目录结构、基本配置图文详解
Mar 28 #Javascript
vue-cli中使用高德地图的方法示例
Mar 28 #Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 #jQuery
JavaScript实现汉字转换为拼音及缩写的方法示例
Mar 28 #Javascript
vue+iview/elementUi实现城市多选
Mar 28 #Javascript
node中使用es6/7/8(支持性与性能)
Mar 28 #Javascript
微信小程序开发实现的IP地址查询功能示例
Mar 28 #Javascript
You might like
PHP 获取远程网页内容的代码(fopen,curl已测)
2011/06/06 PHP
Yii2设置默认控制器的两种方法
2017/05/19 PHP
JavaScript 计算当天是本年本月的第几周
2009/03/22 Javascript
Dojo 学习要点
2010/09/03 Javascript
基于jquery的大众点评,分类导航实现代码
2011/08/23 Javascript
jquery ajax jsonp跨域调用实例代码
2013/12/11 Javascript
js调试系列 控制台命令行API使用方法
2014/06/18 Javascript
jQuery实现单击和鼠标感应事件
2015/02/01 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
2015/06/17 Javascript
BootStrap智能表单实战系列(七)验证的支持
2016/06/13 Javascript
jQuery 选择符详细介绍及整理
2016/12/02 Javascript
Node.js中如何合并两个复杂对象详解
2016/12/31 Javascript
vue实现ToDoList简单实例
2017/02/07 Javascript
AngularJS实现controller控制器间共享数据的方法示例
2017/10/30 Javascript
JavaScript异步加载问题总结
2018/02/17 Javascript
Vue实现PopupWindow组件详解
2018/04/28 Javascript
详解Vue SPA项目优化小记
2018/07/03 Javascript
vue-cli3全面配置详解
2018/11/14 Javascript
一文搞懂ES6中的Map和Set
2019/05/20 Javascript
TypeScript高级用法的知识点汇总
2019/12/17 Javascript
详解Python爬虫的基本写法
2016/01/08 Python
Flask框架web开发之零基础入门
2018/12/10 Python
django实现类似触发器的功能
2019/11/15 Python
Python 静态方法和类方法实例分析
2019/11/21 Python
Python读取表格类型文件代码实例
2020/02/17 Python
德国知名健康零食网上商店:Seeberger
2017/07/27 全球购物
Wojas罗马尼亚网站:波兰皮鞋品牌
2018/11/01 全球购物
美体小铺奥地利官方网站:The Body Shop奥地利
2019/04/11 全球购物
荷兰在线钓鱼商店:Raven
2019/06/26 全球购物
惠普新加坡官方商店:HP Singapore
2020/04/17 全球购物
麦当劳辞职信范文
2014/01/18 职场文书
人事任命书格式
2014/06/05 职场文书
2014年驻村干部工作总结
2014/11/17 职场文书
三方合作意向书范本
2015/05/09 职场文书
撤诉申请书法院范本
2015/05/18 职场文书
Android在Sqlite3中的应用及多线程使用数据库的建议
2022/04/24 Java/Android