前端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" />
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue一个页面实现音乐播放器的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
这篇文章主要给大家介绍了关于vue中created和mounted区别的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-08-08
在Vue 3中,getCurrentInstance是一个用于获取当前组件实例的重要函数,以下是对getCurrentInstance的详细分析,感兴趣的朋友一起看看吧2024-12-12
postcss一种对css编译的工具，类似babel对js的处理，postcss只是一个工具，本身不会对css一顿操作，它通过插件实现功能，autoprefixer就是其一2023-02-02
这篇文章主要为大家详细介绍了Vuex实现简单购物车，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-01-01
本篇文章主要介绍了vue.js 获取当前自定义属性值，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
这篇文章主要介绍了vue中和小程序中使用iconfont的方法，本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-05-05
这篇文章主要为大家介绍了详解Vue虚拟DOM如何提高前端开发效率,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-12-12
Mock.js 是一个用于生成随机数据和拦截 Ajax 请求的 JavaScript 库,它非常适合在前端开发中模拟后端 API,尤其是在前后端分离的开发模式下,本文给大家介绍了如何在Vue2项目中使用Mock.js,需要的朋友可以参考下2024-10-10
这篇文章主要介绍了Vue+Element switch组件的使用,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
最新评论