共计 567 个字符,预计需要花费 2 分钟才能阅读完成。
前端中背景图片极其常用, 但是很容易出现各种问题.
一种是脚手架本身资源引用方式的问题, 如指定静态资源文件夹.
一种是图片资源引入方式, 有时候使用绝对或者相对路径会导致错误.
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
2019-11-13