img标签请求 添加自定义header（二）

之前写过一篇关于img添加自定义请求头的处理方式（点击这里），那么本篇我们来看另外几种实现方法。

自定义指令

以Vue为例，我们可以定义一个全局指令，对img标签进行一些处理。

<template><img :src="src" v-getImage>
</template>

Vue.directive('getImage', {// 插入inserted(el,binding,vnode){let src = el.getAttribute('src');requestImage(src).then(res=>{el.setAttribute('src',res)});},// 更新update(el,binding,vnode){let src = el.getAttribute('src')vnode.context.getImage(src).then(res=>{el.setAttribute('src',res)});},// 解绑unbind(el) {URL.revokeObjectURL(el.getAttribute('src'));}
})

onerror

图像加载过程中发生错误时会触发onerror事件。

我们可以利用这一点来实现手动拦截，主动发起请求并处理数据后，将file或blob对象重新赋值给到src即可。

简单示例如下：

<img src="xxx" onerror="handleError()">

// 错误处理
function handleError() {const oriImg = event.target;// 手动发起请求requestImage(oriImg.currentSrc);// 避免死循环oriImg.onerror = null;
}

扩展方式1

扩展img-src的set方法。示例如下：

<!-- authImg.vue -->
<template><img ref="img" >
</template>
<script>export default {name: 'authImg',props:{src:{type: String,default:''}},watch:{src:{handler(){this.$refs.img = this.src;},immediate:true}}}
</script>

// 自定义请求
function requestImage(url){//...
}
// 扩展原有src行为
function hookImage() {const property = Object.getOwnPropertyDescriptor(Image.prototype, 'src');const nativeSet = property.set;Object.defineProperty(Image.prototype, 'src', {set: function(url){if (url.indexOf('image/view')>-1) {requestImage(url).then(res=>{// 将处理后的src传入，执行原有默认逻辑nativeSet.call(this, URL.createObjectURL(res));});}else{nativeSet.call(this, url);}},});
}
hookImage()

扩展方式2

这个方法主要针对一般页面中的图片。
扩展Element-setAttribute方法。示例如下：

// 自定义请求
function requestImage(url){//...
}
// 扩展原有setAttribute行为
function hookImage() {// 记录原生方法const rawSetAttribute = Element.prototype.setAttribute// 重写setAttributeElement.prototype.setAttribute = function setAttribute (key, value) {if (key == 'src' && value.indexOf('image/view')>-1) {requestImage(value).then(res=>{// 将处理后的src传入，执行原有默认逻辑rawSetAttribute.call(this, key, URL.createObjectURL(res))})} else {rawSetAttribute.call(this, key, value)}}
}
hookImage()

扩展方式3

这个方法主要针对富文本编辑器中的图片。
扩展HTMLDocument-execCommand方法。示例如下：

// 自定义请求
function requestImage(url){//...
}// 扩展原有execCommand行为
function hookImage() {// 图片正则const reg = /<img.*?src=[\"|\']?(.*?)[\"|\']?\s.*?>/gi;// 匹配图片srcconst srcreg = /<img [^>]*src=['"]([^'"]+)[^>]*>/gi;// 记录原生方法const rawSetExecCommand = HTMLDocument.prototype.execCommand// 重写setAttributeHTMLDocument.prototype.execCommand = function execCommand (key,bool, value) {// 一般富文本编辑器使用的图片插入是insertHTML指令，这里匹配img标签if (key == 'insertHTML') {// 如果是图片if(reg.test(value)){// 获取srcvalue.replace(srcreg, (match, capture)=> {if(capture){requestImage(capture).then(res=>{// 替换src为blob对象let imgStr = value.replace(srcreg,`<img src=\'${URL.createObjectURL(res)}\' alt="自定义插入图片">`)// 将处理后的src传入，执行原有默认逻辑rawSetExecCommand.call(this, key, bool, imgStr)})}});}} else {rawSetExecCommand.call(this, key, bool, value)}}
}
hookImage()

总结

• 我在两篇文章中展示了8种实现方法，前面5种都需要每个img标签单独处理，改动量比较大。
• 扩展方式2、扩展方式3两个联合使用，可以全局处理一般图片和富文本编辑器图片（业务代码都不需要改动，几乎可以涵盖所有场景了）。
• 如果你的网站是https，那么只需要使用service worker即可。