vue样式引入图片_Vue引入图片的几种方式

情况1：图片在/public目录下

把图片放到与index.html同级的目录下

方式1

因为vue编译后会生成index.html，所以我们将图片与index.html放在同一目录下，相当于在index.html中使用引入图片

情况2：图片在/src/assets目录下

把图片放到/src/assets目录下

文件层级关系见下图

已知我们在vue中配置@为src的目录

方式1

在vue组件中定义一个变量，变量值为”使用require()方法获取的文件路径”。

require()方法是将编写代码时定义的路径转换为编译打包后的路径。

// 在vue组件中定义此变量，组件创建成功后该变量值为'/static/img/login-bg.df6a3174.png'

backgroundImgUrl: require('@/assets/login-bg.png')

方式2

在vue文件中使用style标签写css样式

.login-container {

* 当前vue文件在login文件下，我们梳理一下通过相对路径找到图片文件

* login ↑ views ↑ src ↓ assets ↓ login-bg.png

* 于是我们得出如下路径，经过测试可以成功引入图片

* 这里需要提一下，这里路径是编写代码时的路径，vue在编译打包时会对路径进行处理

background-image: url('../../assets/login-bg.png');

* 在vue文件中的style标签内，也可以使用@表示src目录，不过要在前面加~，也就是~@

* 使用~@后我们就可以快速写出下面的路径了

background-image: url('~@/assets/login-bg.png');

/* 此行样式：背景图会按比例缩放填充满整个背景(能保证背景图不变形) */

background-size: cover;

}

vue样式引入图片_Vue引入图片的几种方式相关推荐

实现图片预加载的几种方式
感觉自己好久没有写博客了,可能自己变懒了.不知道为什么最近有点迷茫,不知道是该去学一下新东西还是该去看一下具有深度的东西.新的技术需要关注,但是我要去研究一下jquery的源码,这个东西很早就想去看, ...
python怎么下载图片怎么保存到本地_详解Python下载图片并保存本地的两种方式
一:使用Python中的urllib类中的urlretrieve()函数,直接从网上下载资源到本地,具体代码: import os,stat import urllib.request img_url ...
python 图片和二进制转换的三种方式
PIL格式转二进制先读取为PIL格式,再转为二进制 import io import base64 from PIL import Imagedef image2byte(image):'''图片转 ...
原生态的ajax如何上传文件,原生ajax和iframe框架实现图片文件上传的两种方式
大家应该可以举出几种常用的异步文件上传功能的实现方式,使用频率较多的有原生ajax和iframe框架,实现图片文件上传,下面就为大家分享图片文件上传的两种方式:原生ajax和iframe框架,供大家参 ...
vue暂存功能_vue路由缓存的几种实现方式小结
本文实例讲述了vue路由缓存的几种实现方式.分享给大家供大家参考,具体如下: 在我们的日常开发中,有时候会遇到页面的缓存,特别是电商的项目,在商品列表的一些状态都是要缓存下来的. 下面就简单介绍几种 ...
html 如何改变图片形状,图形变换的三种方式是什么？
图形变换的三种方式 1.平移平移,是指在同一平面内,将一个图形上的所有点都按照某个直线方向做相同距离的移动,这样的图形运动叫做图形的平移运动,简称平移. 平移不改变图形的形状和大小.图形经过平移,对 ...
图片拉伸的处理的三种方式
纵观移动市场,一款移动app,要想长期在移动市场立足,最起码要包含以下几个要素:实用的功能.极强的用户体验.华丽简洁的外观.华丽外观的背后,少不了美工的辛苦设计,但如果开发人员不懂得怎么合理展示这些设 ...
Java通过图片url地址获取图片base64位字符串的两种方式
工作中遇到通过图片的url获取图片base64位的需求.一开始是用网上的方法,通过工具类Toolkit,虽然实现的代码比较简短,不过偶尔会遇到图片转成base64位不正确的情况,至今不知道为啥. 之后 ...
vue 实例化几种方式_vue注册组件的几种方式总结
vue注册组件的几种方式总结 1.全局注册(这种方式注册组件必须在vue实例化之前声明) Vue.component('tag-name',{}) 2.局部注册 var Child = { templ ...
vue中子组件和子组件之间怎么通信_Vue组件间通信6种方式
摘要: 总有一款合适的通信方式. Fundebug经授权转载,版权归原作者所有. 前言组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用 ...

vue样式引入图片_Vue引入图片的几种方式

vue样式引入图片_Vue引入图片的几种方式相关推荐

最新文章

热门文章

vue样式 引入图片_Vue引入图片的几种方式

vue样式 引入图片_Vue引入图片的几种方式相关推荐

最新文章

热门文章

vue样式引入图片_Vue引入图片的几种方式

vue样式引入图片_Vue引入图片的几种方式相关推荐