vue 图片拼接反写展示

1.创建文件

创建一个js文件，我是放在utils文件下

const geturl = 'http://127.0.0.1:8080';  //后台地址

function handlerImg(imgStr) {
  var tempArr = []
  if (imgStr) {
    if (imgStr.indexOf(',') !== -1) {
      tempArr = imgStr.split(',').map(item => {
        //如果里面没有http之类的加前缀
        if (item.indexOf('http') === -1) {
          item = geturl + item
        }
        return item
      })
    } else {
      //如果里面没有http之类的加前缀
      if (imgStr.indexOf('http') === -1) {
        imgStr = geturl + imgStr
      }
      tempArr.push(imgStr)
    }
  }
  return tempArr;
}

export default {
  geturl,     //访问后台图片地址
  handlerImg //
}

2.在main.js中引用

import getpicture from '@/utils/getpicture' // 文件地址

Vue.prototype.$getpicture = getpicture; // 全局方法挂载

3.页面中使用

baseUrl: this.$getpicture.geturl,