84 lines
2.6 KiB
JavaScript
84 lines
2.6 KiB
JavaScript
// src/directives/smartImage.js
|
|
import { imageCacheManager } from '@/utils/imageCacheManager'
|
|
|
|
export const smartImage = {
|
|
async mounted(el, binding) {
|
|
if (binding.value) {
|
|
// 设置加载状态样式
|
|
el.style.opacity = '0'
|
|
el.style.transition = 'opacity 0.3s ease-in-out'
|
|
|
|
try {
|
|
// 对于OSS图片使用特殊处理
|
|
if (binding.value.startsWith('https://tkm-likei.oss-ap-southeast-1.aliyuncs.com/h5')) {
|
|
const img = new Image()
|
|
img.crossOrigin = 'anonymous'
|
|
img.onload = () => {
|
|
el.src = binding.value
|
|
el.style.opacity = '1'
|
|
}
|
|
img.onerror = (error) => {
|
|
console.warn(`图片加载失败: ${binding.value}`, error)
|
|
el.src = binding.value
|
|
el.style.opacity = '1'
|
|
}
|
|
img.src = binding.value
|
|
} else {
|
|
// 对于外部链接，直接使用普通加载方式
|
|
if (!imageCacheManager.isBuildAsset(binding.value)) {
|
|
el.src = binding.value
|
|
el.style.opacity = '1'
|
|
return
|
|
}
|
|
|
|
await imageCacheManager.loadImage(binding.value)
|
|
el.src = binding.value
|
|
el.style.opacity = '1'
|
|
}
|
|
} catch (error) {
|
|
console.warn(`图片加载失败: ${binding.value}`, error)
|
|
el.src = binding.value
|
|
el.style.opacity = '1'
|
|
}
|
|
}
|
|
},
|
|
|
|
async updated(el, binding) {
|
|
if (binding.value !== binding.oldValue && binding.value) {
|
|
el.style.opacity = '0'
|
|
|
|
try {
|
|
// 对于OSS图片使用特殊处理
|
|
if (binding.value.startsWith('https://tkm-likei.oss-ap-southeast-1.aliyuncs.com/h5')) {
|
|
const img = new Image()
|
|
img.crossOrigin = 'anonymous'
|
|
img.onload = () => {
|
|
el.src = binding.value
|
|
el.style.opacity = '1'
|
|
}
|
|
img.onerror = (error) => {
|
|
console.warn(`图片更新失败: ${binding.value}`, error)
|
|
el.src = binding.value
|
|
el.style.opacity = '1'
|
|
}
|
|
img.src = binding.value
|
|
} else {
|
|
// 对于外部链接，直接使用普通加载方式
|
|
if (!imageCacheManager.isBuildAsset(binding.value)) {
|
|
el.src = binding.value
|
|
return
|
|
}
|
|
|
|
await imageCacheManager.loadImage(binding.value)
|
|
el.src = binding.value
|
|
el.style.opacity = '1'
|
|
}
|
|
} catch (error) {
|
|
console.warn(`图片更新失败: ${binding.value}`, error)
|
|
el.src = binding.value
|
|
el.style.opacity = '1'
|
|
}
|
|
}
|
|
},
|
|
}
|