带图标的输入框

在项目中经常可以看见账号或密码输入框，左侧带有一个人形小图标。
在vue中结合element-ui的使用：
html代码

    <div class="nameInput">
      <el-input v-model="val" placeholder="请输入您的账号"></el-input>
      <img src="../assets/person.png" alt="">
    </div>

style样式代码

.nameInput{
    width: 400px;
    position: relative;
  }
  .el-input__inner{
    padding-left: 40px;
  }
  .nameInput>img{
    position: absolute;
    left: 12px;
    top: 12px;
  }

实现原理：外层div开启相对定位position:relative；给输入框设置padding-left，用来放置小图标；给img元素设置绝对定位position:absolute，用top/left偏移属性调整位置,即可实现图示效果。