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 相关文章推荐
Add a Table to a Word Document
Jun 15 Javascript
javascript sudoku 数独智力游戏生成代码
Mar 27 Javascript
JS实现的省份级联实例代码
Jun 24 Javascript
js生成缩略图后上传并利用canvas重绘
May 15 Javascript
Node.js 学习笔记之简介、安装及配置
Mar 03 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
Sep 15 Javascript
JavaScript String 对象常用方法详解
May 13 Javascript
老生常谈JQuery data方法的使用
Sep 09 Javascript
纯JavaScript手写图片轮播代码
Oct 20 Javascript
Angular2安装angular-cli
May 21 Javascript
详解vue2.0 资源文件assets和static的区别
Nov 27 Javascript
详解element-ui中表单验证的三种方式
Sep 18 Javascript
解决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
ThinkPHP实例化模型的四种方法概述
2014/08/22 PHP
Bootstrap+PHP实现多图上传功能实例详解
2018/04/08 PHP
PHP观察者模式实例分析【对比JS观察者模式】
2019/05/22 PHP
js获取某元素的class里面的css属性值代码
2014/01/16 Javascript
jquery绑定事件不生效的解决方法
2014/02/11 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
2014/08/15 Javascript
Javascript函数的参数
2015/07/16 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
2016/07/06 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
2016/10/16 Javascript
详解JS中的立即执行函数
2017/02/24 Javascript
jQuery简单实现遍历单选框的方法
2017/03/06 Javascript
JavaScript手风琴页面制作
2017/05/17 Javascript
微信小程序中使用ECharts 异步加载数据的方法
2018/06/27 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
2018/12/16 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
2019/09/18 Javascript
js基础之事件捕获与冒泡原理
2019/10/09 Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
2019/12/06 Javascript
python实现m3u8格式转换为mp4视频格式
2018/02/28 Python
Python判断变量名是否合法的方法示例
2019/01/28 Python
django创建简单的页面响应实例教程
2019/09/06 Python
对python中assert、isinstance的用法详解
2019/11/27 Python
利用Python实现字幕挂载(把字幕文件与视频合并)思路详解
2020/10/21 Python
初探CSS3中的calc()功能
2015/07/14 HTML / CSS
详解HTML5 LocalStorage 本地存储
2016/12/23 HTML / CSS
盛大笔试题
2016/11/05 面试题
集团公司总经理岗位职责
2013/12/20 职场文书
《锄禾》教学反思
2014/04/08 职场文书
室内设计专业自荐信
2014/05/31 职场文书
求职教师自荐书
2014/06/19 职场文书
计划生育工作汇报
2014/10/28 职场文书
英文商务邀请函范文
2015/01/31 职场文书
积极心理学课程心得体会
2016/01/22 职场文书
数据库连接池
2021/04/06 MySQL
Java Dubbo框架知识点梳理
2021/06/26 Java/Android
spring boot项目application.properties文件存放及使用介绍
2021/06/30 Java/Android
OpenCV实现普通阈值
2021/11/17 Java/Android