前端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 相关文章推荐
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
Nov 27 Javascript
IE与FireFox中的childNodes区别
Oct 20 Javascript
js 操作select和option常用代码整理
Dec 13 Javascript
jquery.ui.draggable中文文档(原文翻译)
Nov 15 Javascript
Jquery Uploadify上传带进度条的简单实例
Feb 12 Javascript
JS中常用的输出方式(五种)
Jun 12 Javascript
第六篇Bootstrap表格样式介绍
Jun 21 Javascript
vue组件学习教程
Sep 09 Javascript
详解react-native-fs插件的使用以及遇到的坑
Sep 12 Javascript
微信小程序实现搜索历史功能
Mar 26 Javascript
no-vnc和node.js实现web远程桌面的完整步骤
Aug 11 Javascript
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 Vue.js
基于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
dedecms模板标签代码官方参考
2007/03/17 PHP
简单介绍下 PHP5 中引入的 MYSQLI的用途
2007/03/19 PHP
php根据日期显示所在星座的方法
2015/07/13 PHP
php usort 使用用户自定义的比较函数对二维数组中的值进行排序
2017/05/02 PHP
PHP实现倒计时功能
2020/11/16 PHP
JavaScript学习历程和心得小结
2010/08/16 Javascript
js字符串的各种格式的转换 ToString,Format
2011/08/08 Javascript
Javascript 遍历页面text控件详解
2014/01/06 Javascript
JavaScript导出Excel实例详解
2014/11/25 Javascript
node.js中的fs.truncateSync方法使用说明
2014/12/15 Javascript
浅谈jQuery中replace()方法
2015/05/13 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
2016/07/08 Javascript
详谈Angular路由与Nodejs路由的区别
2017/03/05 NodeJs
微信小程序之绑定点击事件实例详解
2017/07/07 Javascript
利用jsonp解决js读取本地json跨域的问题
2018/12/11 Javascript
vuex 解决报错this.$store.commit is not a function的方法
2018/12/17 Javascript
基于Vue中使用节流Lodash throttle详解
2019/10/30 Javascript
Vue开发中遇到的跨域问题及解决方法
2020/02/11 Javascript
[05:46]2018完美盛典-《同梦共竞》
2018/12/17 DOTA
Python __setattr__、 __getattr__、 __delattr__、__call__用法示例
2015/03/06 Python
python实现挑选出来100以内的质数
2015/03/24 Python
教你用一行Python代码实现并行任务(附代码)
2018/02/02 Python
浅析python继承与多重继承
2018/09/13 Python
Python 日期区间处理 (本周本月上周上月...)
2019/08/08 Python
Python使用py2neo操作图数据库neo4j的方法详解
2020/01/13 Python
python3处理word文档实例分析
2020/12/01 Python
CSS3的文字阴影—text-shadow的使用方法
2012/12/25 HTML / CSS
开发人员所需要知道的HTML5性能分析面面观
2012/07/05 HTML / CSS
HTML5中微数据概述及在搜索引擎中的使用举例
2013/02/07 HTML / CSS
暑期社会实践学生的自我评价
2014/01/09 职场文书
个性车贴标语
2014/06/24 职场文书
竞选班长演讲稿400字
2014/08/22 职场文书
班子个人四风问题整改措施
2014/10/04 职场文书
2014年体育部工作总结
2014/11/13 职场文书
廉政承诺书范文
2015/04/28 职场文书
朋友聚会开场白
2015/06/01 职场文书