场景图：

原理：

通过修改el-input框的type属性，来设置显示或者隐藏。从而改变图标地址。

   <el-input class="passwordinput" :type="pwdObj.pwdType" ref="pwdInput" placeholder="密码"
       v-model="loginObj.password">
         <template #suffix>
                <el-image slot="suffix" class="input-icon" 
                  :src="getIconUrl(pwdObj.pwdType === 'text' ? 'open-eye' : 'close-eye')"
                   fit="scale-down"
                  @click="changeye('pwdType', 'pwdInput')" />
           </template>
    </el-input>

  pwdObj: { pwdType: 'password' }, 默认为password

  //点击图标控制密码的显示和隐藏
        
  changeye(typeName, refName) {

    $set(对象，对象属性，属性值)
    如果点击时类型为password就变为text 反之相反
            this.$set(
                this.pwdObj,
                `${typeName}`,
                this.pwdObj[`${typeName}`] === 'password' ? 'text' : 'password'
            )
            this.$refs[`${refName}`].focus()
        },

   computed: {

        // 通过计算属性获取图标
        getIconUrl() {
            return function (name) {
                return require(`@/assets/vietanm/${name}.png`)
            }
        },

    },

我的图标是本地图标，且名称分别为open-eye 和 close-eye