diff --git a/dist/vue-img.es6.js b/dist/vue-img.es6.js index 657e38c..150aa21 100644 --- a/dist/vue-img.es6.js +++ b/dist/vue-img.es6.js @@ -1,7 +1,34 @@ +const ua = window.navigator.userAgent; + +const isIOS = /iphone|ios|ipad|ipod/i.test(ua); + +const isAlipay = /AliApp\(AP\/([\d.]+)\)/i.test(ua); + +const compareAlipayVersion = (targetVersion) => { + let version = ua.match(/AlipayClient[a-zA-Z]*\/(\d+(?:\.\d+)+)/); + version = version && version.length ? version[1] : ''; + version = version.split('.'); + + targetVersion = targetVersion.split('.'); + for (let i = 0, n1, n2; i < version.length; i++) { + n1 = parseInt(targetVersion[i], 10) || 0; + n2 = parseInt(version[i], 10) || 0; + if (n1 > n2) return -1 + if (n1 < n2) return 1 + } + + return 0 +}; + +const checkSupport = () => { + // only support since 10.1.0 + return isIOS && isAlipay && compareAlipayVersion('10.1.0') >= 0 +}; + const VueImg$1 = Object.create(null); // Check webP support -VueImg$1.canWebp = !![].map && document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') === 0; +VueImg$1.canWebp = checkSupport() || (!![].map && document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') === 0); // Default cdn prefix const protocol = location.protocol === 'https:' ? 'https://' : 'http://'; @@ -198,15 +225,20 @@ const install = (Vue, opt) => { return new Promise(resolve => { img.onload = () => { - setAttr(el, vImgSrc, vnode.tag); + setAttr(el, img.src, vnode.tag); resolve(); }; - if (vImgErr) { - img.onerror = () => { + img.onerror = () => { + // webp图片加载失败降级到普通图片 + // 兼容客户端处理webp失败的情况 + const webpReg = /format\/webp\//; + if (webpReg.test(img.src)) { + img.src = vImgSrc.replace(webpReg, ''); + } else if (vImgErr) { setAttr(el, vImgErr, vnode.tag); resolve(); - }; - } + } + }; setTimeout(() => { resolve(); }, delay); diff --git a/dist/vue-img.js b/dist/vue-img.js index 142c580..b04c106 100644 --- a/dist/vue-img.js +++ b/dist/vue-img.js @@ -4,10 +4,37 @@ (global.VueImg = factory()); }(this, (function () { 'use strict'; +var ua = window.navigator.userAgent; + +var isIOS = /iphone|ios|ipad|ipod/i.test(ua); + +var isAlipay = /AliApp\(AP\/([\d.]+)\)/i.test(ua); + +var compareAlipayVersion = function (targetVersion) { + var version = ua.match(/AlipayClient[a-zA-Z]*\/(\d+(?:\.\d+)+)/); + version = version && version.length ? version[1] : ''; + version = version.split('.'); + + targetVersion = targetVersion.split('.'); + for (var i = 0, n1 = (void 0), n2 = (void 0); i < version.length; i++) { + n1 = parseInt(targetVersion[i], 10) || 0; + n2 = parseInt(version[i], 10) || 0; + if (n1 > n2) { return -1 } + if (n1 < n2) { return 1 } + } + + return 0 +}; + +var checkSupport = function () { + // only support since 10.1.0 + return isIOS && isAlipay && compareAlipayVersion('10.1.0') >= 0 +}; + var VueImg$1 = Object.create(null); // Check webP support -VueImg$1.canWebp = !![].map && document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') === 0; +VueImg$1.canWebp = checkSupport() || (!![].map && document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') === 0); // Default cdn prefix var protocol = location.protocol === 'https:' ? 'https://' : 'http://'; @@ -147,8 +174,7 @@ var getImageClass = function (opt) { keys: [ 'loading', 'error', 'quality', 'delay', - 'prefix', 'suffix', 'adapt', - ], + 'prefix', 'suffix', 'adapt' ], }); }; @@ -161,8 +187,7 @@ var getImageClass = function (opt) { keys: [ 'width', 'height', 'quality', 'format', 'fallback', 'adapt', - 'prefix', 'suffix', - ], + 'prefix', 'suffix' ], }); return getSrc(params) }; @@ -183,8 +208,7 @@ var getImageClass = function (opt) { 'width', 'height', 'quality', 'format', 'fallback', 'adapt', 'prefix', 'suffix', 'defer', - 'urlFormatter', - ], + 'urlFormatter' ], }); } @@ -227,15 +251,20 @@ var install = function (Vue, opt) { return new Promise(function (resolve) { img.onload = function () { - setAttr(el, vImgSrc, vnode.tag); + setAttr(el, img.src, vnode.tag); resolve(); }; - if (vImgErr) { - img.onerror = function () { + img.onerror = function () { + // webp图片加载失败降级到普通图片 + // 兼容客户端处理webp失败的情况 + var webpReg = /format\/webp\//; + if (webpReg.test(img.src)) { + img.src = vImgSrc.replace(webpReg, ''); + } else if (vImgErr) { setAttr(el, vImgErr, vnode.tag); resolve(); - }; - } + } + }; setTimeout(function () { resolve(); }, delay); diff --git a/package.json b/package.json index c898bf7..35c1aaf 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vue-img", - "version": "2.10.0", + "version": "2.11.0", "description": "hash2path wrapper for vue 2", "main": "dist/vue-img.js", "scripts": { diff --git a/src/base.js b/src/base.js index c9c6bf4..8356d2a 100644 --- a/src/base.js +++ b/src/base.js @@ -1,7 +1,9 @@ +import { checkSupport } from './device' + const VueImg = Object.create(null) // Check webP support -VueImg.canWebp = !![].map && document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') === 0 +VueImg.canWebp = checkSupport() || (!![].map && document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') === 0) // Default cdn prefix const protocol = location.protocol === 'https:' ? 'https://' : 'http://' diff --git a/src/device.js b/src/device.js new file mode 100644 index 0000000..faf7015 --- /dev/null +++ b/src/device.js @@ -0,0 +1,26 @@ +const ua = window.navigator.userAgent + +const isIOS = /iphone|ios|ipad|ipod/i.test(ua) + +const isAlipay = /AliApp\(AP\/([\d.]+)\)/i.test(ua) + +const compareAlipayVersion = (targetVersion) => { + let version = ua.match(/AlipayClient[a-zA-Z]*\/(\d+(?:\.\d+)+)/) + version = version && version.length ? version[1] : '' + version = version.split('.') + + targetVersion = targetVersion.split('.') + for (let i = 0, n1, n2; i < version.length; i++) { + n1 = parseInt(targetVersion[i], 10) || 0 + n2 = parseInt(version[i], 10) || 0 + if (n1 > n2) return -1 + if (n1 < n2) return 1 + } + + return 0 +} + +export const checkSupport = () => { + // only support since 10.1.0 + return isIOS && isAlipay && compareAlipayVersion('10.1.0') >= 0 +} diff --git a/src/directive.js b/src/directive.js index 296bf14..3de5821 100644 --- a/src/directive.js +++ b/src/directive.js @@ -18,11 +18,16 @@ const install = (Vue, opt) => { return new Promise(resolve => { img.onload = () => { - setAttr(el, vImgSrc, vnode.tag) + setAttr(el, img.src, vnode.tag) resolve() } - if (vImgErr) { - img.onerror = () => { + img.onerror = () => { + // webp图片加载失败降级到普通图片 + // 兼容客户端处理webp失败的情况 + const webpReg = /format\/webp\// + if (webpReg.test(img.src)) { + img.src = vImgSrc.replace(webpReg, '') + } else if (vImgErr) { setAttr(el, vImgErr, vnode.tag) resolve() }