diff --git a/packages/taro-components/src/components.d.ts b/packages/taro-components/src/components.d.ts index 640c4f96f298..cb58740456c9 100644 --- a/packages/taro-components/src/components.d.ts +++ b/packages/taro-components/src/components.d.ts @@ -191,7 +191,7 @@ export namespace Components { */ "duration": number; /** - * 给 prewviewImage API 使用,全屏显示 swiper + * 给 previewImage API 使用,全屏显示 swiper */ "full": boolean; /** @@ -890,7 +890,7 @@ declare namespace LocalJSX { */ "duration"?: number; /** - * 给 prewviewImage API 使用,全屏显示 swiper + * 给 previewImage API 使用,全屏显示 swiper */ "full"?: boolean; /** diff --git a/packages/taro-components/src/components/swiper/swiper.tsx b/packages/taro-components/src/components/swiper/swiper.tsx index a77ab7b6e362..e327fd45e9f8 100644 --- a/packages/taro-components/src/components/swiper/swiper.tsx +++ b/packages/taro-components/src/components/swiper/swiper.tsx @@ -79,7 +79,7 @@ export class Swiper implements ComponentInterface { @Prop() displayMultipleItems = 1 /** - * 给 prewviewImage API 使用,全屏显示 swiper + * 给 previewImage API 使用,全屏显示 swiper */ @Prop() full = false diff --git a/packages/taro-h5/src/api/image/index.js b/packages/taro-h5/src/api/image/index.js index fd4fa6190c03..32d970325fee 100644 --- a/packages/taro-h5/src/api/image/index.js +++ b/packages/taro-h5/src/api/image/index.js @@ -4,4 +4,4 @@ export { default as chooseImage } from './chooseImage' export { default as getImageInfo } from './getImageInfo' -export { previewImage } from './preview_image' +export { previewImage } from './previewImage' diff --git a/packages/taro-h5/src/api/image/preview_image.js b/packages/taro-h5/src/api/image/previewImage.js similarity index 84% rename from packages/taro-h5/src/api/image/preview_image.js rename to packages/taro-h5/src/api/image/previewImage.js index 5cee35257d2c..3e75d18e25e0 100644 --- a/packages/taro-h5/src/api/image/preview_image.js +++ b/packages/taro-h5/src/api/image/previewImage.js @@ -33,7 +33,9 @@ export async function previewImage (options) { let children = [] try { - children = await Promise.all(urls.map(loadImage)) + children = await Promise.all( + urls.map(e => loadImage(e, options.fail)) + ) } catch (error) { if (options.fail) { options.fail(error) @@ -60,8 +62,8 @@ export async function previewImage (options) { } } -function loadImage (url) { - return new Promise((resolve, reject) => { +function loadImage (url, fail) { + return new Promise((resolve) => { const item = document.createElement('taro-swiper-item-core') item.style.cssText = ` display: flex; @@ -72,11 +74,12 @@ function loadImage (url) { image.style.maxWidth = '100%' image.src = url item.appendChild(image) - image.addEventListener('load', () => { - resolve(item) - }) - image.addEventListener('error', (err) => { - reject(err) - }) + // Note: 等待图片加载完后返回,会导致轮播被卡住 + resolve(item) + if (typeof fail === 'function') { + image.addEventListener('error', (err) => { + fail(err) + }) + } }) }