前端vue-cli项目中使用img图片和background背景图的几种方法


Posted in Javascript onNovember 13, 2019

前端中背景图片极其常用,但是很容易出现各种问题.

一种是脚手架本身资源引用方式的问题,如指定静态资源文件夹.

一种是图片资源引入方式,有时候使用绝对或者相对路径会导致错误.

css方法

正常使用background属性即可.

如有问题,应把图片资源放入static静态资源文件夹,不是assets之类的其他文件夹.

<div class="bgImg"></div>
<style>
.bgImg{
  background-image:url("@/../static/images/logo.png")
}
</style>

import方法

使用import导入背景图片

import bgImg from "@/../static/images/logo.png"
export default {
  name: 'App',
  data () {
    return {
      bgImg: bgImg,
    }
  }
}

使用内联样式

<div :style="{backgroundImage:'url('+bgImg+')'}"></div>

require方法

使用require获取图片

export default {
  name: 'App',
  data () {
    return {
      bgImg: require("@/../static/images/logo.png"),
    }
  }
}

赋值为img的src

<img :src="bgImg" />

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
两个比较有用的Javascript工具函数代码
Feb 17 Javascript
Extjs中常用表单介绍与应用
Jun 07 Javascript
JQuery给元素绑定click事件多次执行的解决方法
May 29 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
Jun 16 Javascript
浅谈javascript中的加减时间
Jul 12 Javascript
AngularJS中isolate scope的用法分析
Nov 22 Javascript
js点击任意区域弹出层消失实现代码
Dec 27 Javascript
原生js编写2048小游戏
Mar 17 Javascript
原生js中ajax访问的实例详解
Sep 19 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
Javascript查看大图功能代码实现
May 07 Javascript
原生js实现自定义消息提示框
Nov 19 Javascript
基于vue-cli3和element实现登陆页面
Nov 13 #Javascript
vue data引入本地图片的两种方式小结
Nov 13 #Javascript
vue中的 $slot 获取插槽的节点实例
Nov 12 #Javascript
解决vue v-for src 图片路径问题 404
Nov 12 #Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
Nov 12 #Javascript
vue+webpack dev本地调试全局样式引用失效的解决方案
Nov 12 #Javascript
解决Vue在Tomcat8下部署页面不加载的问题
Nov 12 #Javascript
You might like
php简单封装了一些常用JS操作
2007/02/25 PHP
Pain 全世界最小最简单的PHP模板引擎 (普通版)
2011/10/23 PHP
php中常用字符串处理代码片段整理
2011/11/07 PHP
基于curl数据采集之正则处理函数get_matches的使用
2013/04/28 PHP
PHP实现一个简单url路由功能实例
2016/11/05 PHP
ThinkPHP 3.2.3实现页面静态化功能的方法详解
2017/08/03 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
node.js中的buffer.copy方法使用说明
2014/12/14 Javascript
使用javascript插入样式
2016/03/14 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
2016/06/07 Javascript
移动端刮刮乐的实现方式(js+HTML5)
2017/03/23 Javascript
jQuery niceScroll滚动条错位问题的解决方法
2018/02/03 jQuery
js DOM的事件常见操作实例详解
2019/12/16 Javascript
vue跳转方式(打开新页面)及传参操作示例
2020/01/26 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
2021/02/06 Javascript
Python转换HTML到Text纯文本的方法
2015/01/15 Python
Python基于sftp及rsa密匙实现远程拷贝文件的方法
2016/09/21 Python
Python 3.x 连接数据库示例(pymysql 方式)
2017/01/19 Python
Python 绘图库 Matplotlib 入门教程
2018/04/19 Python
python用fsolve、leastsq对非线性方程组求解
2018/12/15 Python
python tools实现视频的每一帧提取并保存
2020/03/20 Python
python+mysql实现个人论文管理系统
2019/10/25 Python
Python魔法方法 容器部方法详解
2020/01/02 Python
Python包和模块的分发详细介绍
2020/06/19 Python
Python通过getattr函数获取对象的属性值
2020/10/16 Python
python 发送get请求接口详解
2020/11/17 Python
Nike英国官网:Nike.com (UK)
2017/02/13 全球购物
爱岗敬业演讲稿范文
2014/01/14 职场文书
违反学校规定检讨书
2014/01/18 职场文书
连锁酒店店长职责范本
2014/02/13 职场文书
企业业务员岗位职责
2014/03/14 职场文书
公司年会主持词
2014/03/22 职场文书
房屋租赁协议书
2014/04/10 职场文书
厂区绿化方案
2014/05/08 职场文书
详细谈谈MYSQL中的COLLATE是什么
2021/06/11 MySQL
mysql全面解析json/数组
2022/07/07 MySQL