uniapp 图片动态域名

uniapp中可以通过动态获取接口url的方式来实现图片动态域名。具体实现方法如下：

1.在request.js中，通过监听uni.$on('urlChange',...)事件来获取动态的接口url，并将其赋值给baseURL变量。

2.在main.js中，通过引入公共方法getDomain()来获取当前域名，并根据协议类型拼接出H5地址、APP下载地址和接口地址。

3.将获取到的接口地址通过uni.$emit('urlChange',{ baseUrl })发送给request.js中的监听器，从而实现动态获取接口url的目的。

4.在Vue.prototype中定义$imgUrl变量，将获取到的接口地址赋值给$imgUrl变量，从而实现图片动态域名的效果。

// request.js
let baseURL;
uni.$on('urlChange', data => {
  baseURL = data.baseUrl;
})
console.log(baseURL);

// main.js
import { getDomain, protocol } from '@/utils/common.js'

getDomain().then(domain => {
  console.log(domain);
  // H5地址
  let h5Url = `${protocol.h5Url}${domain}`
  // APP下载地址
  let downAPPUrl = `${protocol.downAPPUrl}${domain}`
  // 接口
  let baseUrl = `${protocol.api}${domain}`
  uni.$emit('urlChange', { baseUrl })
  Object.assign(Vue.prototype, {
    '$downAPPUrl': downAPPUrl,
    '$h5Url': h5Url,
    '$imgUrl': baseUrl,
  })
})

// uniapp中使用$imgUrl变量
<template>
  <img :src="$imgUrl + '/image.png'" />
</template>