uniapp 拦截image标签的图片请求

Question

在uniapp中，因为我的部分图片路径是一部分的如：media/category/74db6ed463c4fb7f6aac85ede6f10af64935%E4%BC%98%E9%80%89.png，
所以我想拦截下所有的图片请求（image标签）然后添加URL前缀。
我找到了uni.addInterceptor拦截器，发现他好像只能拦截request。

Answer 1

引自免费微信小程序：皆我百晓生

要实现在uni-app中对<image>标签的图片请求进行拦截并添加URL前缀，可以利用H5平台的自定义指令或者Vue的自定义指令功能。uni-app基于Vue.js，因此可以使用Vue的特性来实现这一需求。下面将详细说明如何通过自定义指令来完成这一目标。

自定义指令实现方案

1. 创建自定义指令

首先，你需要创建一个自定义指令，例如命名为v-image-prefix。这个指令的作用是在<image>标签上添加前缀到图片URL。

2. 实现指令逻辑

在项目的main.js文件中（或其他合适位置），定义这个自定义指令，并实现其逻辑。以下是一个示例代码：

// main.js 或其他初始化文件中
import Vue from 'vue';

Vue.directive('imagePrefix', {
  bind(el, binding, vnode) {
    const imgSrc = el.getAttribute('src');
    if (imgSrc) {
      // 添加前缀
      const newSrc = `https://your-image-host.com/${imgSrc}`;
      el.setAttribute('src', newSrc);
    }
  },
});

这段代码中的bind函数会在指令被绑定到元素时执行。它检查<image>元素的src属性，如果存在，则添加前缀。

3. 使用自定义指令

接下来，在你的组件或页面中使用这个自定义指令。例如：

<!-- 在你的页面或组件中 -->
<template>
  <view>
    <image v-image-prefix src="media/category/74db6ed463c4fb7f6aac85ede6f10af64935%E4%BC%98%E9%80%89.png" mode="aspectFill"></image>
  </view>
</template>

注意事项

• 确保在项目初始化阶段注册了自定义指令。
• 测试不同场景下的图片加载情况，确保自定义指令正确处理了所有图片路径。

通过上述步骤，你可以有效地为所有使用了v-image-prefix指令的<image>标签添加URL前缀，从而解决图片路径不完整的问题。这种方法不仅灵活，而且易于维护和扩展。