图片的运用

路径提示拓展

Path Intellisense

---

引入样式

i {
  width: px;
  height: px;
  display: block;
  background: url("") no-repeat;
  background-size: contain;
}

---

写scss记得：一定要写

& > div

---

@占位符的代码提示

Vue @占位符的代码提示_tby_pr的博客-CSDN博客_vue中的占位符

---

动态src***

<ul class="aboutList">
  <li v-for="(item, index) in aboutList" :key="index">
    <img :src="`${item.isIMGShow ? item.iHover : item.i}`" alt="" />
    {{ item.title }}
  </li>
</ul>

 data的数据是这样的会报错

i:"../assets/schogshipinhao@2x.png",
iHover: "",

两种解决方案

1. require('')

i:require("../assets/schoongzhihu@2x.png"),

2. import

import gongzhonghao from "../assets/weixin@2x.png";


i: gongzhonghao,

---

 修改input checkbox 的样式

<label>全部<input type="checkbox" name=""/></label>

label > input {
    width: r(36);
    height: r(38);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url("../../../assets/images/kanban/checkbox1.png") no-repeat top
      center;
    background-size: contain;
 }
 label > input:checked {
    background: url("../../../assets/images/kanban/checkbox.png") no-repeat top
      center;
    background-size: contain;
 }

 

---