优秀的编程知识分享平台

网站首页 > 技术文章 正文

前端 UI 样式:vue-cli中如何使用背景图片?import,require

nanyue 2024-07-25 05:43:13 技术文章 9 ℃

问题:vue-cli工程中如何使用背景图?

第一种方法:通过 import 引入

首先,引入要使用的背景图片:

<script type="text/javascript">
 import cover from "../assets/images/cover.png";
 export default{
 ...
 }
</script>

然后,通过 v-bind:style 使用:

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

第二种方法:通过 require 引入:

直接通过 v-bind require 配合使用

<div :style="{ backgroundImage:'url(' + require('../assets/images/couver.png') + ')' }"></div>
最近发表
标签列表