Vue中img的src属性绑定与static文件夹实例


Posted in Javascript onMay 18, 2017

不少人在vue的开发中遇到这样一个问题: img的src属性绑定url变量,然而图片加载失败。

大部分的情况中,是开发者使用了错误的写法,例如:

<img src="{{ imgUrl }}"/>

这样写肯定是不对的,正确的写法应该使用v-bind:

<img v-bind:src="imgUrl"/>

不过,有时候即使使用了正确的语法,依旧无法显示图片,因为你的imgUrl使用了本地图片的路径。

例如,有下面一个文件结构:

Vue中img的src属性绑定与static文件夹实例

现在,我们要在App.vue里使用位于src/assets/目录下的logo.png图片,于是,我们设:

imgUrl = './assets/logo.png'

奇怪的事情出现了,图片加载失败。查看网页源代码,发现一个错误:

Vue中img的src属性绑定与static文件夹实例

看这个错误代码,我们发现,网页把根域名作为相对路径的根目录了,然而我们文件的路径是相对于项目文件的根目录的,当然就找不到了。

既然这样,那我们去找build后的dist文件夹。发现文件的结构是这样:

Vue中img的src属性绑定与static文件夹实例

是不是说只要把url改成./static/img/logo.png就可以了呢?依然是不行的。打开img文件夹我们可以发现,所有的文件名后都被添加上了一个随机字符串,原始的文件名已经无法对应了。

那么,到底应该怎么加载本地图片呢?回头看vue-cli的文件结构,发现其中有一个叫做static的文件夹,尝试将logo.png放入这个文件夹,然后修改imgUrl:

imgUrl = '/static/logo.png'

成功读取到了logo.png. 执行npm run build后查看dist文件,发现logo.png原封不动地放在了根目录下。

原来,之前的目录结构是有问题的,图片一类的静态文件,应该放在这个static文件夹下,这个文件夹下的文件(夹)会按照原本的结构放在网站根目录下。这时我们再去使用/static绝对路径,就可以访问这些静态文件了。

另外,如果说想在不调整目录结构的情况下读取本地图片,还有一个方法,那就是直接传入图片编码。即:

imgUrl = require('./assets/logo.png')

这样可以读到项目路径下的图片,但是要注意,因为CommonJS只允许使用字符串字面量,所以这种方法的灵活性依旧很差,所以还是推荐将静态文件放入static文件夹下。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 点击整页变灰的效果(可做退出效果)。
Jan 09 Javascript
JavaScript入门教程(6) Window窗口对象
Jan 31 Javascript
js获取单元格自定义属性值的代码(IE/Firefox)
Apr 05 Javascript
jquery js 重置表单 reset()具体实现代码
Aug 05 Javascript
jQuery内部原理和实现方式浅析
Feb 03 Javascript
JavaScript预解析及相关技巧分析
Apr 21 Javascript
javascript闭包概念简单解析(推荐)
Jun 03 Javascript
js canvas实现擦除动画
Jul 16 Javascript
浅析JS中对函数function的理解(基础篇)
Oct 14 Javascript
微信小程序调用PHP后台接口 解析纯html文本
Jun 13 Javascript
JS函数本身的作用域实例分析
Mar 16 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
Aug 14 Javascript
JS验证全角与半角及相互转化的介绍
May 18 #Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
May 18 #Javascript
Javascript实现倒计时时差效果
May 18 #Javascript
vue-cli webpack 开发环境跨域详解
May 18 #Javascript
JavaScript实现简单的星星评分效果
May 18 #Javascript
Javascript循环删除数组中元素的几种方法示例
May 18 #Javascript
Javascript实现信息滚动效果
May 18 #Javascript
You might like
用header 发送cookie的php代码
2007/03/16 PHP
PHP中Restful api 错误提示返回值实现思路
2016/04/12 PHP
PHP使用SOAP调用API操作示例
2018/12/25 PHP
PHP内存溢出优化代码详解
2021/02/26 PHP
jQuery 验证插件 Web前端设计模式(asp.net)
2010/10/17 Javascript
jquery键盘事件介绍
2011/01/31 Javascript
js图片延迟加载的实现方法及思路
2013/07/22 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
2016/05/03 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
2016/06/29 Javascript
Node.js中文件操作模块File System的详细介绍
2017/01/05 Javascript
使用jQuery实现页面定时弹出广告效果
2017/08/24 jQuery
Javascript实现运算符重载详解
2018/04/07 Javascript
vue使用swiper.js重叠轮播组建样式
2019/11/14 Javascript
python缩进区别分析
2014/02/15 Python
python删除指定类型(或非指定)的文件实例详解
2015/07/06 Python
通过Python爬虫代理IP快速增加博客阅读量
2016/12/14 Python
对python append 与浅拷贝的实例讲解
2018/05/04 Python
对sklearn的使用之数据集的拆分与训练详解(python3.6)
2018/12/14 Python
python opencv 读取图片 返回图片某像素点的b,g,r值的实现方法
2019/07/03 Python
python实现递归查找某个路径下所有文件中的中文字符
2019/08/31 Python
python随机数分布random均匀分布实例
2019/11/27 Python
python tkinter之顶层菜单、弹出菜单实例
2020/03/04 Python
针对HTML5的Web Worker使用攻略
2015/07/12 HTML / CSS
expedia比利时:预订航班+酒店并省钱
2018/07/13 全球购物
新闻系毕业生推荐信
2013/11/16 职场文书
艺术应用与设计专业个人的自我评价
2013/11/19 职场文书
工业自动化毕业生自荐信范文
2014/01/04 职场文书
商场中秋节活动方案
2014/02/07 职场文书
幼教求职信
2014/03/12 职场文书
省文明单位申报材料
2014/05/08 职场文书
设备售后服务承诺书
2014/05/30 职场文书
英语系毕业生求职信
2014/07/13 职场文书
2014年外贸业务员工作总结
2014/12/11 职场文书
竞聘书的秘诀
2019/04/02 职场文书
七年级作文之雪景
2019/11/18 职场文书
JavaScript 原型与原型链详情
2021/11/02 Javascript