前端vue-cli项目中使用img图片和background背景图的几种方法
更新时间：2019年11月13日 08:29:13 作者：浅吟轻唱
这篇文章主要介绍了前端vue-cli项目中使用img图片和background背景图的几种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
前端中背景图片极其常用,但是很容易出现各种问题.
一种是脚手架本身资源引用方式的问题,如指定静态资源文件夹.
一种是图片资源引入方式,有时候使用绝对或者相对路径会导致错误.
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" />
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了如何基于vue2实现简单的印章徽章控件,文中通过示例代码讲解详细,具有一定的学习价值,需要的朋友们下面就跟随小编来一起学习学习吧2023-10-10
这篇文章主要介绍了Vue用v-for给循环标签自身属性添加属性值的方法，文中大家给大家列举了三种方法 ,需要的朋友可以参考下2018-10-10
这篇文章主要介绍了vue+element实现打印页面功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-05-05
Carousel（走马灯）是一种常见的前端组件,通常用于展示多个项目（通常是图片或内容块）的轮播效果,这篇文章主要介绍了vue3项目中的el-carousel 轮播图的使用,需要的朋友可以参考下2024-02-02
基于Vue+Openlayer实现动态加载geojson的方法
本文通过实例代码给大家介绍基于Vue+Openlayer实现动态加载geojson的方法，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2021-09-09
这篇文章主要为大家详细介绍了vue实现div拖拽互换位置的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
摘要：Vue多选框回填是实现表单数据高效处理的常见需求,本文主要介绍了vue el-table实现多选框回填的示例代码,具有一定的参考价值,感兴趣的可以了解一下2024-01-01
在我们的印象使用中，vue除了写业务代码没有特别新奇的功能了，今天就来看看如何自动化生成vue组件文档2021-06-06
Vuex modules模式下mapState/mapMutations的操作实例
这篇文章主要介绍了Vuex modules 模式下 mapState/mapMutations 的操作实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
filter 方法会创建一个新的数组,其中包含满足指定条件的所有元素,这个方法非常适合循环遍历数组并根据特定条件过滤元素的情况,这篇文章主要介绍了Vue3基础[常用的循环],需要的朋友可以参考下2024-01-01
最新评论