Vue进阶（贰零肆）：vant van-image无法读取本地图片解决方案及map根据value获取key

一、前言

vant中的van-image组件的src参数默认为图片的网络链接：

<van-image
  width="100"
  height="100"
  src="https://img.yzcdn.cn/vant/cat.jpeg"
/>

当要引用本地的图片时，直接写图片的路径在vue项目中会刷不出图片（但用 <img> 标签可以显示 ）。

二、解决方式一

<van-swipe :autoplay="3000" >
   <van-swipe-item v-for="(image, index) in imageList" :key="index">
     <img :src="image" style="width:100%;height:150px;" />
   </van-swipe-item>
 </van-swipe>

data () {
    return {
      isShow:false,
      pingan:"",
      times:"",
      content:{title: '填报须知',content: '欢迎ssss'},
      imageList: [
        require('../../../static/images/1.png'),
        require('../../../static/images/2.png'),
        require('../../../static/images/3.jpg'),
      ],
    active:1,
    notificationList:[]
    }
  },

三、解决方式二

或者

在 .vue 文件中通过相对路径引用本地图片时，需要在图片的链接外包上一层 require()，将图片 URL 转换为 webpack 模块请求，并结合 file-loader 或者 url-loader 进行处理。

<!-- 错误写法 -->
<van-image src="./image.png" />

<!-- 正确写法 -->
<van-image :src="require('./image.png')" />

前端通过对象保存字典值用于列表字段翻译或者加载下拉框都是很常见的操作，有时也会需要根据字典值的value获取对应的key。

测试数据

paramsMap: {
  orderType: {
    '0': '咨询',
    '1': '投诉',
    '2': '举报',
    '3': '建议',
    '4': '求助',
    '5': '表扬',
  },
  subjectType: {
    'LB': '劳保',
    'XW': '消委',
    'GA': '公安',
    'GT': '国土',
    'CG': '城管',
    'GJJ': '公积金',
    'ZH': '综合',
  },
},

假设页面用到两个类型的字典值，我们使用paramsMap对象保存。(正常使用可以调用接口加载)

根据key获取value

getParamValue(paramType, code) {
  if (!Object.prototype.hasOwnProperty.call(this.paramsMap, paramType)) {

    return '参数类型错误';

  }

  return this.paramsMap[paramType][code];
},

调用时指定参数类型

this.getParamValue('orderType', '1');

根据value获取key

getParamCode(paramType, value, compare = (a, b) => a === b) {
  if (!Object.prototype.hasOwnProperty.call(this.paramsMap, paramType)) {

    return '参数类型错误';

  }

  return Object.keys(this.paramsMap[paramType]).find(k => compare(this.paramsMap[paramType][k], value))
}


this.getParamCode('subjectType', '公安');

四、拓展阅读

• 《Vue系列》