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 相关文章推荐
使用jquery自定义鼠标样式满足个性需求
Nov 05 Javascript
js对图片base64编码字符串进行解码并输出图像示例
Mar 17 Javascript
javascript + jquery实现定时修改文章标题
Mar 19 Javascript
jQuery设置指定网页元素宽度和高度的方法
Mar 25 Javascript
浅谈JavaScript中的Math.atan()方法的使用
Jun 14 Javascript
jQuery窗口拖动功能的实现代码
Feb 04 Javascript
js数组实现权重概率分配
Sep 12 Javascript
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
JavaScript选择排序算法原理与实现方法示例
Aug 06 Javascript
详解VUE里子组件如何获取父组件动态变化的值
Dec 26 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
Feb 20 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
Nov 16 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
咖啡机如何保养和日常清洁?
2021/03/03 冲泡冲煮
ThinkPHP采用原生query实现关联查询left join实例
2014/12/02 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
详谈symfony window下的安装 安装时候出现的问题以及解决方法
2017/09/28 PHP
php微信公众号开发之翻页查询
2018/10/20 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
2007/03/06 Javascript
javascript面向对象之Javascript 继承
2010/05/04 Javascript
使用js解决由border属性引起的div宽度问题
2013/11/26 Javascript
深入解析JavaScript中的变量作用域
2013/12/06 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
2014/02/21 Javascript
JQuery 控制内容长度超出规定长度显示省略号
2014/05/23 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
2015/04/20 Javascript
jQuery实现滚动切换的tab选项卡效果代码
2015/08/26 Javascript
理解javascript异步编程
2016/01/27 Javascript
jQuery的内容过滤选择器学习教程
2016/04/18 Javascript
JavaScript必知必会(二) null 和undefined
2016/06/08 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
2016/11/01 Javascript
easyui导出excel无法弹出下载框的快速解决方法
2016/11/10 Javascript
简单谈谈ES6的六个小特性
2016/11/18 Javascript
纯js实现倒计时功能
2017/01/06 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
2017/03/10 Javascript
Vue拖拽组件开发实例详解
2018/05/11 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
2019/02/01 Javascript
Vue实现根据hash高亮选项卡
2019/05/27 Javascript
详解从vue-loader源码分析CSS Scoped的实现
2019/09/23 Javascript
vue 实现v-for循环回来的数据动态绑定id
2019/11/07 Javascript
filter使用python3代码进行迭代元素的实例详解
2020/12/03 Python
购买澳大利亚最好的服装和内衣在线:BONDS
2016/10/14 全球购物
深深扎根运动世界的生活品牌:Tillys
2017/10/30 全球购物
斯德哥尔摩通票:Stockholm Pass
2018/01/09 全球购物
初中班级口号
2014/06/09 职场文书
公司授权委托书格式范文
2014/10/02 职场文书
工作感言一句话
2015/08/01 职场文书
2019年英语版感谢信(8篇)
2019/09/29 职场文书
Python 全局空间和局部空间
2022/04/06 Python