Vue中引用图片-背景图片

Vue中引用图片-背景图片
强烈推介IDEA2020.2破解激活,IntelliJ IDEA 注册码,2020.2 IDEA 激活码

一.Vue初体验:https://blog.csdn.net/qq_43674132/article/details/104857216

二.Vue条件命令:https://blog.csdn.net/qq_43674132/article/details/104857322

三.Vue循环指令:https://blog.csdn.net/qq_43674132/article/details/104857517

四.Vue处理用户输入:https://blog.csdn.net/qq_43674132/article/details/104857651

五.Vue组件初体验:https://blog.csdn.net/qq_43674132/article/details/104857870

六.Vue实例:https://blog.csdn.net/qq_43674132/article/details/104857953

七.Vue模板语法:https://blog.csdn.net/qq_43674132/article/details/104858009

八.Vue计算属性:https://blog.csdn.net/qq_43674132/article/details/104858068

九.Vue.js侦听器:https://blog.csdn.net/qq_43674132/article/details/104860083

十.Vue.js的class绑定:https://blog.csdn.net/qq_43674132/article/details/104861826

十一.Vue style绑定:https://blog.csdn.net/qq_43674132/article/details/104877107

十二.Vue 条件渲染:https://blog.csdn.net/qq_43674132/article/details/104877177

十三.Vue 列表渲染:https://blog.csdn.net/qq_43674132/article/details/104877393

十四.Vue事件处理:https://blog.csdn.net/qq_43674132/article/details/104878173

十五.Vue表单输入绑定:https://blog.csdn.net/qq_43674132/article/details/104879776

十六.Vue中引用图片:https://blog.csdn.net/qq_43674132/article/details/107043105

Vue中引用图片-背景图片

第一种方案

<img class="card" src="~@/assets/img/card_bg.png" ></img>

第二种方案

<div class="card"></div>
<style>
  .card {
    background: url('~@/assets/img/card_bg.png') center center no-repeat;
  }
</style>

第三种方案

使用import

<script>
import cardPath from "@/assets/img/card_bg.png"
export default {
  data() {
    return {
      cardPath: cardPath ,
    }
  }
}
</script>
<div class="card" :style="{backgroundImage: 'url(' + cardPath + ')' }"></div>

 

本文来源凌枫zero,由javajgs_com转载发布,观点不代表Java架构师必看的立场,转载请标明来源出处:https://javajgs.com/archives/7978

发表评论