vue cli使用绝对路径引用图片问题的解决


Posted in Javascript onDecember 06, 2017

前言

Vue是什么,是一套构建用户界面的渐进式框架(官网解释),什么叫渐进式框架呢,简单回答就是主张最少,这些概念只能自己去看,自己去理解,一千个读者一千个哈姆雷特,不过多的解释。Vue官方文档 很全面的。

Vue是近两年来比较火的一个前端框架(渐进式框架吧),本文将给大家详细介绍vue cli使用绝对路径引用图片问题的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看吧。

正文:

在页面中使用绝对路径可通过在js中用 require() 引入

data (){
 return {
  src: require('IMAGES/banner.jpg')
 }
}
<img :src="src">

样式里面似乎无法使用绝对路径,除非把图片资源都放到static里面,然后就可以这样引用

background: url("/static/images/banner.jpg") no-repeat;

但,放到static里面webpack打包后只会把资源复制到发布目录而不会把小图片优化为base64。

为了兼顾可以把图片资源优化,所以还是不适合把图片资源放到static,但,在vue页面style标签里面写样式随着目录的深入有可能引用路径是:

background: url("../../../images/banner.jpg") no-repeat;

有个做法似乎可以省去一些麻烦:

把样式文件统一放到style文件夹里面,样式图片资源用相对路径,然后在style标签用src属性引入样式,这样就可以避免太多层的返回了~~~

── src
 ── images
  ── banner.jpg
 ── style
  ── index.scss
/*style*/
background: url("../images/banner.jpg") no-repeat;
<style src="STYLE/index" lang="scss"></style>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
你所要知道JS(DHTML)中的一些技巧
Jan 09 Javascript
javascript中innerText和innerHTML属性用法实例分析
May 13 Javascript
Vuex之理解state的用法实例
Apr 19 Javascript
判断滚动条滑到底部触发事件(实例讲解)
Nov 15 Javascript
JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
Mar 10 Javascript
webpack css加载和图片加载的方法示例
Sep 11 Javascript
详解微信小程序自定义组件的实现及数据交互
Jul 22 Javascript
js 实现 list转换成tree的方法示例(数组到树)
Aug 18 Javascript
微信小程序如何实现五星评价功能
Oct 15 Javascript
vue quill editor 使用富文本添加上传音频功能
Jan 14 Javascript
OpenLayers3实现测量功能
Sep 25 Javascript
JavaScript架构搭建前端监控如何采集异常数据
Jun 25 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
Dec 06 #Javascript
实现单层json按照key字母顺序排序的示例
Dec 06 #Javascript
Thinkjs3新手入门之如何使用静态资源目录
Dec 06 #Javascript
浅谈JsonObject中的key-value数据解析排序问题
Dec 06 #Javascript
Thinkjs3新手入门之添加一个新的页面
Dec 06 #Javascript
vue 实现 ios 原生picker 效果及实现思路解析
Dec 06 #Javascript
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
Dec 06 #Javascript
You might like
基于PHP与XML的PDF文档生成技术
2006/10/09 PHP
php 404错误页面实现代码
2009/06/22 PHP
php将服务端的文件读出来显示在web页面实例
2016/10/31 PHP
PHP载入图像imagecreatefrom_gif_jpeg_png系列函数用法分析
2016/11/14 PHP
豆瓣网的jquery代码实例
2008/06/15 Javascript
20个非常棒的Jquery实用工具 国外文章
2010/01/01 Javascript
js 判断计算字符串长度/判断空的简单方法
2013/08/05 Javascript
Javascript的严格模式strict mode详细介绍
2014/06/06 Javascript
jQuery随机密码生成的方法
2015/03/09 Javascript
jQuery常用且重要方法汇总
2015/07/13 Javascript
jquery实现点击变换导航样式的方法
2015/08/31 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
2015/10/28 Javascript
提升jQuery的性能需要做好七件事
2016/01/11 Javascript
jQuery基于扩展实现的倒计时效果
2016/05/14 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
2016/07/09 Javascript
Google 地图事件实例讲解
2016/08/06 Javascript
微信小程序getPhoneNumber获取用户手机号
2017/09/29 Javascript
Node.js 使用request模块下载文件的实例
2018/09/05 Javascript
js实现无缝轮播图特效
2020/05/09 Javascript
python下实现二叉堆以及堆排序的示例
2017/09/29 Python
轻松实现TensorFlow微信跳一跳的AI
2018/01/05 Python
Python pip替换为阿里源的方法步骤
2019/07/02 Python
python可视化爬虫界面之天气查询
2019/07/03 Python
python中栈的原理及实现方法示例
2019/11/27 Python
Python通过Tesseract库实现文字识别
2020/03/05 Python
Tensorflow中的降维函数tf.reduce_*使用总结
2020/04/20 Python
python 监控logcat关键字功能
2020/09/04 Python
在校学生职业规划范文
2014/01/08 职场文书
海飞丝的广告词
2014/03/20 职场文书
大二学生学年自我鉴定
2014/09/12 职场文书
2014年大学学生会工作总结
2014/12/02 职场文书
追悼会答谢词
2015/01/05 职场文书
高中美术教学反思
2016/02/17 职场文书
2019年警察入党转正申请书最新范文
2019/09/03 职场文书
详解Python内置模块Collections
2022/03/22 Python
VUE解决跨域问题Access to XMLHttpRequest at
2022/05/06 Vue.js