Change image download from Promise.all to forEach for progressive display
This commit is contained in:
parent
72cef8d29b
commit
35e75b3c4b
@ -900,23 +900,28 @@ function extractAttachmentImageUrls(attachments: any[]): string[] {
|
||||
return [...new Set(urls)] // 去重
|
||||
}
|
||||
|
||||
// 自动下载图片的函数(简化版)
|
||||
// 自动下载图片的函数(渐进式加载:下载完成即显示)
|
||||
async function autoDownloadImages(imageUrls: string[]) {
|
||||
const downloadPromises = imageUrls.map(async (url) => {
|
||||
// 不等待所有下载完成,每个图片下载完成后立即可用
|
||||
imageUrls.forEach(async (url) => {
|
||||
const filename = url.split('/').pop() || 'image.jpg'
|
||||
|
||||
try {
|
||||
const result = await downloadImageToLocal(url, filename)
|
||||
if (result.success) {
|
||||
// 返回是否是新下载的图片(非缓存)
|
||||
return !(result as any).data?.cached
|
||||
// 下载成功后,触发图片重新加载
|
||||
const imgElements = document.querySelectorAll(`img[src="${url}"], img[src*="${filename}"]`)
|
||||
imgElements.forEach((img) => {
|
||||
const imgEl = img as HTMLImageElement
|
||||
if (imgEl.complete && !imgEl.naturalHeight) {
|
||||
imgEl.src = url + '?t=' + Date.now()
|
||||
}
|
||||
})
|
||||
}
|
||||
} catch (error) {
|
||||
// 静默失败,不影响其他图片
|
||||
}
|
||||
return false
|
||||
})
|
||||
|
||||
await Promise.all(downloadPromises)
|
||||
}
|
||||
|
||||
// 加载详情数据 - 优化版本,同步加载附件数据
|
||||
|
||||
@ -31,7 +31,9 @@
|
||||
<img
|
||||
:src="attachment.file_url"
|
||||
:alt="attachment.file_name"
|
||||
loading="lazy"
|
||||
@click="openImageGallery(index)"
|
||||
@error="handleImageError"
|
||||
/>
|
||||
<div class="image-overlay">
|
||||
<button
|
||||
@ -289,6 +291,17 @@ const addAttachment = () => {
|
||||
const deleteAttachment = (attachment: any) => {
|
||||
emit('delete-attachment', attachment)
|
||||
}
|
||||
|
||||
// 处理图片加载错误
|
||||
const handleImageError = (event: Event) => {
|
||||
const img = event.target as HTMLImageElement
|
||||
// 如果图片加载失败,尝试重新加载(可能文件正在下载中)
|
||||
if (img.src && !img.src.includes('?retry=')) {
|
||||
setTimeout(() => {
|
||||
img.src = img.src.split('?')[0] + '?retry=' + Date.now()
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user