微信小程序怎么實現input框中加入小圖標

今天小編給大家分享一下微信小程序怎么實現input框中加入小圖標的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

頁面如下:

然后按照，html頁面中的做法，在input框中添加了background-image屬性，出乎意料的事，小程序報了下邊這樣一個錯誤:

emmmm 好像小程序的background-image屬性并不給力啊，然后查閱相關資料后，放棄了background-image屬性。

然后另辟蹊徑，由于小程序中，好像只有image標簽才能加載本地圖片，所以考慮使用image標簽來實現，大致思路就是在一個view中，左邊是image,右邊是input框，wxml頁面如下:

 <view class="loginBox">
   <view style='width:70%;margin-left:15%;'>
    <view style='border-top-left-radius:8px;border-top-right-radius:8px;width:100%;height:38px;display:inline-block;background:#fff;'>
     <view style='width:20%;display:inline-block;height:100%;'><image src='../../assets/images/user_icon.png' style='display:inline;' mode="aspectFit"></image></view>
     <input style='width:80%;display:inline-block;height:100%;' placeholder-style='font-size:12px;' placeholder='用戶名'></input>
    </view>
    <view style='width:100%;height:38px;display:inline-block;background:#fff;margin-top:-5px;border-top:1px solid #f8f8f8;border-bottom-left-radius:8px;border-bottom-right-radius:8px;'>
     <view style='width:20%;display:inline-block;height:100%;'><image src='../../assets/images/pass_icon.png' style='display:inline' mode="aspectFit"></image></view>
     <input style='width:80%;display:inline-block;height:100%;' placeholder-style='font-size:12px;' placeholder='密碼'></input>     
    </view>
   </view> 
 </view>

以上就是“微信小程序怎么實現input框中加入小圖標”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。