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 相关文章推荐
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
Oct 24 Javascript
避免回车键导致的页面无意义刷新的解决方法
Apr 12 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
Oct 17 Javascript
javascript每日必学之多态
Feb 23 Javascript
JS获取和修改元素样式的实例代码
Aug 06 Javascript
文件上传,iframe跨域数据提交的实现
Nov 18 Javascript
详解用vue.js和laravel实现微信支付
Jun 23 Javascript
JS简单实现数组去重的方法分析
Oct 14 Javascript
使用express搭建一个简单的查询服务器的方法
Feb 09 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
webpack+vue.js构建前端工程化的详细教程
May 10 Javascript
js实现QQ邮箱邮件拖拽删除功能
Aug 27 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
给多个地址发邮件的类
2006/10/09 PHP
在PHP中使用Sockets 从Usenet中获取文件
2008/01/10 PHP
解析PHP中ob_start()函数的用法
2013/06/24 PHP
typecho插件编写教程(二):写一个新插件
2015/05/28 PHP
PHP 中 DOMDocument保存xml时中文出现乱码问题的解决方案
2016/09/19 PHP
javascript中如何处理引号编码&amp;#034;
2013/08/15 Javascript
基于JavaScript实现智能右键菜单
2016/03/02 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
2016/03/25 Javascript
checkbox批量选中,获取选中项的值的简单实例
2016/06/28 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
2017/02/18 Javascript
JavaScript实现按键精灵的原理分析
2017/02/21 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
2017/09/30 Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
2018/01/05 Javascript
详解JavaScript添加给定的标签选项
2018/09/17 Javascript
详解Vue2 添加对scss的支持
2019/01/02 Javascript
vue-cli3自动消除console.log()的调试信息方式
2020/10/21 Javascript
JQuery绑定事件四种实现方法解析
2020/12/02 jQuery
[01:00:30]TFT vs VGJ.T Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
python生成器的使用方法
2013/11/21 Python
Python对数据库操作
2016/03/28 Python
Python单元测试简单示例
2018/07/03 Python
python中pytest收集用例规则与运行指定用例详解
2019/06/27 Python
python日期与时间戳的各种转换示例
2020/02/12 Python
python 实现在shell窗口中编写print不向屏幕输出
2020/02/19 Python
python3 sorted 如何实现自定义排序标准
2020/03/12 Python
如何在python中实现线性回归
2020/08/10 Python
PyCharm+Miniconda3安装配置教程详解
2021/02/16 Python
最受欢迎的自我评价
2013/12/22 职场文书
反腐倡廉警示教育活动心得体会
2014/09/04 职场文书
大学生联谊活动策划书(光棍节)
2014/10/10 职场文书
新生开学寄语大全
2015/05/28 职场文书
电力安全学习心得体会
2016/01/18 职场文书
《最后一头战象》教学反思
2016/02/16 职场文书
盘点2020年适合农村地区创业的项目
2019/10/16 职场文书
postgresql 删除重复数据案例详解
2021/08/02 PostgreSQL
Redis安装使用RedisJSON模块的方法
2022/03/23 Redis