vue html引入图片,vue引入图片的几种方式

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

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

情况1-1.png

方式1

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

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

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

情况2-1.png

文件层级关系见下图

情况2-2.png

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

情况2-3.png

方式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 html引入图片,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方法传值到data_vue组件传值的几种方式
1.bus总线 //定义bus插件 //在util文件夹下定义bus.js import Vue from 'vue'; let install = (vue) => { vue.prototy ...
html 如何改变图片形状,图形变换的三种方式是什么？
图形变换的三种方式 1.平移平移,是指在同一平面内,将一个图形上的所有点都按照某个直线方向做相同距离的移动,这样的图形运动叫做图形的平移运动,简称平移. 平移不改变图形的形状和大小.图形经过平移,对 ...
图片拉伸的处理的三种方式
纵观移动市场,一款移动app,要想长期在移动市场立足,最起码要包含以下几个要素:实用的功能.极强的用户体验.华丽简洁的外观.华丽外观的背后,少不了美工的辛苦设计,但如果开发人员不懂得怎么合理展示这些设 ...
Java通过图片url地址获取图片base64位字符串的两种方式
工作中遇到通过图片的url获取图片base64位的需求.一开始是用网上的方法,通过工具类Toolkit,虽然实现的代码比较简短,不过偶尔会遇到图片转成base64位不正确的情况,至今不知道为啥. 之后 ...
vue路由跳转 router-link 清除历史记录的三种方式
1.在vue项目中说起路由跳转,我们最先想到的就是router-link标签以及this.$router.push函数. router-link和this.\$router.push的实现原理是一样的 ...
vue中路由按需加载的几种方式
使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,如: import Hello from '@/components/Hello' import ...

vue html引入图片,vue引入图片的几种方式

vue html引入图片,vue引入图片的几种方式相关推荐

最新文章

热门文章