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>

引用本地资源时，动态的加载无效。可以用require引入后使用：

//JS
const _menuCfg = [
    {icon: require("@/assets/icon/index1.png"), tag: "dangjian"},
    {icon: require("@/assets/icon/index2.png"), tag: "zhengwu"},
    {icon: require("@/assets/icon/index3.png"), tag: "chanye"},
    {icon: require("@/assets/icon/index4.png"), tag: "lvyou"},
    {icon: require("@/assets/icon/index5.png"), tag: "yingji"},
    {icon: require("@/assets/icon/index6.png"), tag: "gouwu"},
  ];
export default {
    data() {
      return {
        menuCfg: [..._menuCfg],
      }
    },
}

//html:
<template v-for="(v,k) in menuCfg">
   <div class="menu-item flex-column flex-center" :key="k" :class="v.tag">
      <img :src="v.icon" class="icon">
    </div>
</template>