完美解决微信小程序van-field left-icon自定义图片

实现效果:

html 复制代码
<view class="userName">
        <van-field left-icon="{{loginUserNameIcon}}" clearable class="fieldName" value="{{ loginUserName }}" placeholder="请输入账号" border="{{ false }}" >
        </van-field>
</view>
<view class="userName">
        <van-field left-icon="{{passwordIcon}}" clearable type="password" class="fieldName" value="{{ loginPassword }}" placeholder="请输入密码" border="{{ false }}" bind:blur ="companyCodeInput"/>
</view>

data中定义:

javascript 复制代码
data: {
 
    loginUserNameIcon:"/pages/img/username.png",
    passwordIcon:"/pages/img/psw.png",

  },
相关推荐
李宥小哥6 分钟前
微信小程序07-开发进阶
微信小程序·小程序·notepad++
小小竹子8 分钟前
前端vue-实现富文本组件
前端·vue.js·富文本
万物得其道者成15 分钟前
React Zustand状态管理库的使用
开发语言·javascript·ecmascript
小白小白从不日白16 分钟前
react hooks--useReducer
前端·javascript·react.js
下雪天的夏风29 分钟前
TS - tsconfig.json 和 tsconfig.node.json 的关系,如何在TS 中使用 JS 不报错
前端·javascript·typescript
diygwcom40 分钟前
electron-updater实现electron全量版本更新
前端·javascript·electron
volodyan43 分钟前
electron react离线使用monaco-editor
javascript·react.js·electron
^^为欢几何^^1 小时前
lodash中_.difference如何过滤数组
javascript·数据结构·算法
Hello-Mr.Wang1 小时前
vue3中开发引导页的方法
开发语言·前端·javascript
程序员凡尘1 小时前
完美解决 Array 方法 (map/filter/reduce) 不按预期工作 的正确解决方法,亲测有效!!!
前端·javascript·vue.js