在data中引入图片的时候,要加上 require

data中使用背景图片 :background:'url('+item.bgc+')'

一、在data中引入图片:

 data() {
    return {
      active:0,
      firstLUl: [
        {
          title: "全站监控运维管理",
          img: require("../../assets/logo.png"),
          bgc: require("@/assets/images/system/card-bgc.png"),
          content2: "6666666666666666666666",
        },
        {
          title: "全站监控运维管理",
          img: require("../../assets/logo.png"),
          content1: "6666666666666666666666",
          content2: "6666666666666666666666",
        },
        {
          title: "全站监控运维管理",
          img: require("../../assets/logo.png"),
          content1: "6666666666666666666666",
          content2: "6666666666666666666666",
        },
      ],
    }
}

二、使用引入的图片

  <ul>
        <li v-for="(v, i) in firstLUl" :key="i">
          <img :src="v.img" alt="" width="30px" />
          <h3 :style="{background:'url('+item.bgc+')'+'no-repeat center'}">{{ v.title }}</h3>
          <p>{{ v.content1 }}</p>
          <p>{{ v.content2 }}</p>
        </li>
      </ul>

Logo

前往低代码交流专区

更多推荐