图片的运用

原创已于 2022-05-27 22:04:40 修改 · 335 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2022-03-09 10:53:22 首次发布

插件专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在SCSS中使用样式拓展和占位符技巧，以及在Vue中实现动态src的高效管理。还涵盖了CSS变量和选择器的最佳实践，以及如何优雅地处理图片路径和input样式调整。

路径提示拓展

Path Intellisense

引入样式

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

写scss记得：一定要写

& > div

@占位符的代码提示

Vue @占位符的代码提示_tby_pr的博客-优快云博客_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;
 }