前端根据银行卡号或银行的简码动态显示logo图标

前言：在前端界面，有时候需要添加、显示银行卡等功能时，可能会需要显示对应银行的logo，银行有很多，而且有可能会有更新，前端一般可以怎么做呢，是直接在本地存储还是后端直接返回还是前端自己处理呢？

    方法一：前端收集银行logo，对应显示。

    方法二：由后端处理，通过接口放回给前端展示。如此前端无需特殊处理，直接展示即可。

    方法三：前端根据银行简称，去“资源库”动态获取对应图标展示。本文讲述此方法具体实现：

所谓的资源库，就是找线上相对权威并且数据信息较全的平台，找到他们根据银行卡号或者简码返回银行logo的api接口。我们找的支付宝：

https://ccdcapi.alipay.com/validateAndCacheCardInfo.json?_input_charset=utf-8&cardNo=银行卡卡号&cardBinCheck=true

就是普通的get请求，然后把银行卡卡号作为cardNo的参数传入即可

就是普通的get请求，把银行卡归属标识码作为t参数传入即可

示例：

测试银行卡号：6221506020009066385

https://ccdcapi.alipay.com/validateAndCacheCardInfo.json?_input_charset=utf-8&cardNo=6221506020009066385&cardBinCheck=true

返回结果如下：

{
    "bank": "PSBC",  //银行名称
    "cardType": "DC",  //卡类型
    "key": "6221506020009066385", 
    "messages": [],
    "stat": "ok",
    "validated": true  //是否通过验证
}

• PSBC 标识码对映的就是 “PSBC”: “中国邮政储蓄银行”
• cardType类型和对应名称

   DC: "储蓄卡",
  CC: "信用卡",
  SCC: "准贷记卡",
  PC: "预付费卡"

获取银行logo：

• 长条的图标：