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

533 阅读 0 评论 352 点赞

我是靠谱客的博主勤奋外套，这篇文章主要介绍前端vue-cli项目中使用img图片和background背景图的几种方法，现在分享给大家，希望可以做个参考。

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

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

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

css方法

正常使用background属性即可.

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

复制代码

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

import方法

使用import导入背景图片

复制代码

1
2
3
4
5
6
7
8
9
import bgImg from "@/../static/images/logo.png"
export default {
  name: 'App',
  data () {
    return {
      bgImg: bgImg,
    }
  }
}

使用内联样式

复制代码

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

require方法

使用require获取图片

复制代码

1
2
3
4
5
6
7
8
export default {
  name: 'App',
  data () {
    return {
      bgImg: require("@/../static/images/logo.png"),
    }
  }
}

赋值为img的src

复制代码

1
<img :src="bgImg" />

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持靠谱客。

最后

以上就是勤奋外套最近收集整理的关于前端vue-cli项目中使用img图片和background背景图的几种方法的全部内容，更多相关前端vue-cli项目中使用img图片和background背景图内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：JavaScript
浏览次数：533 次浏览
发布日期：2022-05-11 01:10:02
本文链接：https://www.kaopuke.com/article/k-p-k_14_u_7_ogf1_13__23__6_y.html

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

最后

评论列表共有 0 条评论

发表评论取消回复

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

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

微信扫一扫：分享

发表评论取消回复