前端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中for循环的效率问题及相关优化
Mar 13 Javascript
Bootstrap实现水平排列的表单
Jul 04 Javascript
深入理解JavaScript函数参数(推荐)
Jul 26 Javascript
如何编写一个完整的Angular4 FormText 组件
Nov 18 Javascript
React Native中NavigatorIOS组件的简单使用详解
Jan 27 Javascript
vue实现树形菜单效果
Mar 19 Javascript
JavaScript格式化json和xml的方法示例
Jan 22 Javascript
Angular CLI 使用教程指南参考小结
Apr 10 Javascript
基于Layui自定义模块的使用方法详解
Sep 14 Javascript
JS实现秒杀倒计时特效
Jan 02 Javascript
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
Node.JS如何实现JWT原理
Sep 18 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来自动调用不同服务器上的flash
2006/10/09 PHP
php检查字符串中是否包含7位GSM字符的方法
2015/03/17 PHP
PHP中abstract(抽象)、final(最终)和static(静态)原理与用法详解
2020/06/05 PHP
jscript之Open an Excel Spreadsheet
2007/06/13 Javascript
Js 中debug方式
2010/02/07 Javascript
jquery中通过过滤器获取表单元素的实现代码
2011/07/05 Javascript
jQuery :nth-child前有无空格的区别分析
2011/07/11 Javascript
用Js实现的动态增加表格示例自己写的
2013/10/21 Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
2015/01/13 Javascript
javascript面向对象之this关键词用法分析
2015/01/13 Javascript
Flow之一个新的Javascript静态类型检查器
2015/12/21 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
2016/06/30 Javascript
Three.js学习之几何形状
2016/08/01 Javascript
Select2.js下拉框使用小结
2016/10/24 Javascript
利用jQuery解析获取JSON数据
2017/04/08 jQuery
JavaScript闭包和回调详解
2017/08/09 Javascript
vue.js 嵌套循环、if判断、动态删除的实例
2018/03/07 Javascript
基于Koa2写个脚手架模拟接口服务的方法
2018/11/27 Javascript
如何在Angular应用中创建包含组件方法示例
2019/03/23 Javascript
JavaScript算法学习之冒泡排序和选择排序
2019/11/02 Javascript
vue使用swiper实现左右滑动切换图片
2020/10/16 Javascript
python中scikit-learn机器代码实例
2018/08/05 Python
使用tensorflow实现线性回归
2018/09/08 Python
Python中logging.NullHandler 的使用教程
2018/11/29 Python
python将字典列表导出为Excel文件的方法
2019/09/02 Python
Python 操作mysql数据库查询之fetchone(), fetchmany(), fetchall()用法示例
2019/10/17 Python
python实现opencv+scoket网络实时图传
2020/03/20 Python
Django用户身份验证完成示例代码
2020/04/03 Python
幼儿园新学期寄语
2014/01/18 职场文书
《乌鸦和狐狸》教学反思
2014/02/08 职场文书
上课打牌的检讨书
2014/02/15 职场文书
开学典礼致辞
2015/07/29 职场文书
2016教师廉洁从教心得体会
2016/01/13 职场文书
2019已经过半,你知道年中工作总结该怎么写吗?
2019/07/03 职场文书
创业计划书之溜冰场
2019/10/25 职场文书
Springboot-cli 开发脚手架,权限认证,附demo演示
2022/04/28 Java/Android