修改src
在 Element UI 的 `el-image` 组件中全局修改 `src`，有以下几种方案：

## 方案1：使用全局混入（Mixin）- 推荐

在 `main.js` 中添加全局混入，拦截并修改所有 `el-image` 的 src：

```javascript
import Vue from 'vue';
import ElementUI from 'element-ui';

Vue.use(ElementUI);

// 全局混入
Vue.mixin({
  mounted() {
    // 查找当前组件下的所有 el-image 组件
    this.$nextTick(() => {
      const images = this.$el.querySelectorAll('.el-image__inner');
      images.forEach(img => {
        if (img.src) {
          // 修改图片地址，例如添加 CDN 前缀
          const originalSrc = img.getAttribute('src');
          if (originalSrc && !originalSrc.startsWith('http')) {
            img.src = `https://your-cdn.com${originalSrc}`;
          }
        }
      });
    });
  }
});
```

## 方案2：封装自定义组件

创建一个自定义的图片组件 `MyImage.vue`：

```vue
<template>
  <el-image
    :src="processedSrc"
    :preview-src-list="processedPreviewList"
    v-bind="$attrs"
    v-on="$listeners"
  >
    <template v-for="slot in Object.keys($slots)" :slot="slot">
      <slot :name="slot" />
    </template>
  </el-image>
</template>

<script>
export default {
  name: 'MyImage',
  props: {
    src: String,
    previewSrcList: Array
  },
  computed: {
    processedSrc() {
      return this.processSrc(this.src);
    },
    processedPreviewList() {
      if (!this.previewSrcList) return [];
      return this.previewSrcList.map(src => this.processSrc(src));
    }
  },
  methods: {
    processSrc(src) {
      if (!src) return '';
      
      // 统一处理逻辑
      // 1. 添加 CDN 前缀
      if (!src.startsWith('http')) {
        return `https://your-cdn.com${src}`;
      }
      
      // 2. 添加图片处理参数
      // return `${src}?x-oss-process=image/resize,w_800`;
      
      // 3. 替换域名
      // return src.replace('old-domain.com', 'new-domain.com');
      
      return src;
    }
  }
};
</script>
```

然后在 `main.js` 中全局注册：

```javascript
import MyImage from '@/components/MyImage.vue';

Vue.component('MyImage', MyImage);
// 或者覆盖原组件
Vue.component('ElImage', MyImage);
```

## 方案3：使用 Vue 原型方法

在 `main.js` 中添加全局方法：

```javascript
// 定义图片 URL 处理函数
Vue.prototype.$imageUrl = function(src) {
  if (!src) return '';
  
  // 相对路径添加 CDN 前缀
  if (!src.startsWith('http')) {
    return `https://your-cdn.com${src}`;
  }
  
  // 处理阿里云 OSS 图片
  if (src.includes('aliyuncs.com')) {
    return `${src}?x-oss-process=image/resize,w_800`;
  }
  
  return src;
};
```

在组件中使用：

```vue
<template>
  <el-image :src="$imageUrl(imagePath)" />
</template>

<script>
export default {
  data() {
    return {
      imagePath: '/images/avatar.jpg'
    };
  }
};
</script>
```

## 方案4：通过 Vue.directive 自定义指令

创建全局指令 `v-image-src`：

```javascript
// main.js
Vue.directive('image-src', {
  bind(el, binding) {
    const img = el.querySelector('img') || el;
    const originalSrc = binding.value;
    
    if (originalSrc && !originalSrc.startsWith('http')) {
      img.src = `https://your-cdn.com${originalSrc}`;
    } else {
      img.src = originalSrc;
    }
  },
  update(el, binding) {
    const img = el.querySelector('img') || el;
    const originalSrc = binding.value;
    
    if (originalSrc && !originalSrc.startsWith('http')) {
      img.src = `https://your-cdn.com${originalSrc}`;
    } else {
      img.src = originalSrc;
    }
  }
});
```

使用方式：

```vue
<template>
  <el-image v-image-src="imagePath" />
</template>
```

## 方案5：修改 Axios 拦截器（适用于动态加载图片）

如果图片地址来自 API 响应：

```javascript
// request.js
import axios from 'axios';

// 响应拦截器
axios.interceptors.response.use(response => {
  // 递归处理响应数据中的图片字段
  const processImageUrls = (obj) => {
    if (typeof obj !== 'object' || obj === null) return obj;
    
    for (let key in obj) {
      if (typeof obj[key] === 'string' && 
          (key.includes('image') || key.includes('img') || key.includes('avatar') || key.includes('pic'))) {
        // 处理图片 URL
        if (!obj[key].startsWith('http')) {
          obj[key] = `https://your-cdn.com${obj[key]}`;
        }
      } else if (typeof obj[key] === 'object') {
        processImageUrls(obj[key]);
      }
    }
    return obj;
  };
  
  response.data = processImageUrls(response.data);
  return response;
});
```

## 方案6：使用 Vuex 全局状态管理

```javascript
// store/index.js
export default new Vuex.Store({
  state: {
    cdnPrefix: 'https://your-cdn.com'
  },
  getters: {
    imageUrl: (state) => (src) => {
      if (!src) return '';
      if (!src.startsWith('http')) {
        return `${state.cdnPrefix}${src}`;
      }
      return src;
    }
  }
});
```

在组件中使用：

```vue
<template>
  <el-image :src="$store.getters.imageUrl(imagePath)" />
</template>
```

## 实际应用示例

结合实际需求，我推荐使用 **方案2（封装组件）+ 方案3（原型方法）** 的组合：

```javascript
// utils/image.js
export function processImageUrl(src, options = {}) {
  if (!src) return '';
  
  let url = src;
  
  // 1. 添加 CDN 前缀
  if (!url.startsWith('http')) {
    url = `${process.env.VUE_APP_CDN_URL}${url}`;
  }
  
  // 2. 添加图片处理参数（如压缩、裁剪）
  if (options.width || options.height) {
    const params = [];
    if (options.width) params.push(`w_${options.width}`);
    if (options.height) params.push(`h_${options.height}`);
    url += `?x-oss-process=image/resize,${params.join(',')}`;
  }
  
  // 3. 添加时间戳防止缓存
  if (options.noCache) {
    const separator = url.includes('?') ? '&' : '?';
    url += `${separator}t=${Date.now()}`;
  }
  
  return url;
}

// main.js
import { processImageUrl } from '@/utils/image';
Vue.prototype.$imageUrl = processImageUrl;
```

使用时：

```vue
<template>
  <el-image 
    :src="$imageUrl(avatar, { width: 200 })" 
    :preview-src-list="[$imageUrl(avatar)]"
  />
</template>
```

选择哪种方案取决于你的具体需求：
- **需要完全透明的全局处理**：方案1（Mixin）
- **需要灵活控制且便于维护**：方案2（封装组件）
- **快速简单的解决方案**：方案3（原型方法）
- **API 数据统一处理**：方案5（拦截器）