vue-cli脚手架引入图片的几种方法总结


Posted in Javascript onMarch 13, 2018

我个人常用的方法,一直在摸索更好的方法,如果各位大佬有什么建议,可以给我评论留言哦

1、import方法

第一步:在.vue文件中import edit from 'path'(path是图片与.vue的相对路径)

第二步:在data对象中定义一个属性edits,值对应edit

vue-cli脚手架引入图片的几种方法总结

第三步:在template中 给标签绑定属性

vue-cli脚手架引入图片的几种方法总结

最后刷新界面看效果就可以了!

2、static方法

第一步:图片放在static文件夹,在data对象的一个里定义属性pro_img,属性值是图片与.vue的相对路径

vue-cli脚手架引入图片的几种方法总结

第二步:在template中 给标签绑定属性

vue-cli脚手架引入图片的几种方法总结

刷新看效果

解决vue组件css中背景图片路径报错问题

前提是你用了vue-cil,那么在build目录下找到utils.js中的ExtractTextPlugin.extract({}),里面添加下面这个属性就完美解决了publicPath: '../../'

vue-cli脚手架引入图片的几种方法总结

解释

文件最终会打包压缩为js。当运行的时候,css中的相对路径指向已经发生变化指向了根目录,所以出现加载错误的问题。

下面是这个插件的解释。

extract-text-webpack-plugin

作用:该插件的主要是为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象。

插件参数:该插件有三个参数意义分别如下:

use: 指需要什么样的loader去编译文件,这里由于源文件是.css所以选择css-loader

fallback: 编译后用什么loader来提取css文件

publicfile: 用来覆盖项目路径,生成该css文件的文件路径

以上这篇vue-cli脚手架引入图片的几种方法总结就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS获取农历日期具体实例
Nov 14 Javascript
javascript模拟地球旋转效果代码实例
Dec 02 Javascript
JS网页图片按比例自适应缩放实现方法
Jan 15 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
Nov 17 Javascript
js获取及修改网页背景色和字体色的方法
Dec 29 Javascript
javascript html实现网页版日历代码
Mar 08 Javascript
jQuery弹出窗口简单实现代码
Mar 09 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
Jul 10 Javascript
javascript帧动画(实例讲解)
Sep 02 Javascript
微信小程序实现的一键连接wifi功能示例
Apr 24 Javascript
js实现窗口全屏示例详解
Sep 17 Javascript
SSM VUE Axios详解
Oct 05 Vue.js
解决vue-cli创建项目的loader问题
Mar 13 #Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
Mar 13 #Javascript
基于vue.js实现的分页
Mar 13 #Javascript
微信小程序中实现手指缩放图片的示例代码
Mar 13 #Javascript
基于vue中css预加载使用sass的配置方式详解
Mar 13 #Javascript
Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解
Mar 13 #Javascript
vue加载自定义的js文件方法
Mar 13 #Javascript
You might like
php+mysql实现无限级分类 | 树型显示分类关系
2006/11/19 PHP
php中获取指定IP的物理地址的代码(正则表达式)
2011/06/23 PHP
PHP实现QQ空间自动回复说说的方法
2015/12/02 PHP
php文件上传、下载和删除示例
2020/08/28 PHP
laravel批量生成假数据的方法
2019/10/09 PHP
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
2011/01/01 Javascript
js使用函数绑定技术改变事件处理程序的作用域
2011/12/26 Javascript
jQuery实现设置、移除文本框默认值功能
2015/01/13 Javascript
JavaScript对数字的判断与处理实例分析
2015/02/02 Javascript
js同源策略详解
2015/05/21 Javascript
javascript基于prototype实现类似OOP继承的方法
2015/12/16 Javascript
Backbone View 之间通信的三种方式
2016/08/09 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
2016/10/27 Javascript
vue.js动态数据绑定学习笔记
2017/05/19 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
2017/05/23 Javascript
bootstrap精简教程_动力节点Java学院整理
2017/07/14 Javascript
Vue+Vux项目实践完整代码
2017/11/30 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
2017/12/11 Javascript
react+ant design实现Table的增、删、改的示例代码
2018/12/27 Javascript
vue-cli3 从搭建到优化的详细步骤
2019/01/20 Javascript
angular 实现下拉列表组件的示例代码
2019/03/09 Javascript
JavaScript实现多个物体同时运动
2020/03/12 Javascript
跟老齐学Python之通过Python连接数据库
2014/10/28 Python
Python中的True,False条件判断实例分析
2015/01/12 Python
python爬取酷狗音乐排行榜
2019/02/20 Python
python多线程并发及测试框架案例
2019/10/15 Python
使用Django实现把两个模型类的数据聚合在一起
2020/03/28 Python
keras的load_model实现加载含有参数的自定义模型
2020/06/22 Python
python 爬虫爬取京东ps4售卖情况
2020/12/18 Python
HTML5新增form控件和表单属性实例代码详解
2019/05/15 HTML / CSS
采用专利算法搜索最廉价的机票:CheapAir
2016/09/10 全球购物
mysql有关权限的表都有哪几个
2015/04/22 面试题
高一新生军训方案
2014/05/12 职场文书
企业诚信承诺书
2014/05/23 职场文书
标准版个人借条怎么写?以及什么是借条?
2019/08/28 职场文书
Java 超详细讲解十大排序算法面试无忧
2022/04/08 Java/Android