图片加载失败
@@ -52,6 +59,7 @@ export default {
documentKey: '',
mode: 'view',
type: 'desktop',
+ imageDimensions: null,
}
},
props: {
@@ -112,7 +120,22 @@ export default {
// 最终预览列表
finalPreviewList() {
return this.previewSrcList.length > 0 ? this.previewSrcList : [this.imageUrl]
- }
+ },
+ imageStyle() {
+ if (!this.imageDimensions) {
+ return {}
+ }
+ const maxWidth = 600
+ const maxHeight = 400
+ const widthRatio = maxWidth / this.imageDimensions.width
+ const heightRatio = maxHeight / this.imageDimensions.height
+ const ratio = Math.min(widthRatio, heightRatio, 1)
+
+ return {
+ width: `${Math.round(this.imageDimensions.width * ratio)}px`,
+ height: `${Math.round(this.imageDimensions.height * ratio)}px`
+ }
+ },
},
methods: {
// 文件点击事件
@@ -126,6 +149,15 @@ export default {
handleImageClick() {
this.$emit('image-click', this.imageUrl)
},
+ handleImageLoad(event) {
+ const { naturalWidth, naturalHeight } = event?.target || {}
+ if (naturalWidth && naturalHeight) {
+ this.imageDimensions = {
+ width: naturalWidth,
+ height: naturalHeight
+ }
+ }
+ },
handleDocumentReady() {
console.log('文档已准备就绪')
},
@@ -138,6 +170,11 @@ export default {
handleInitialized() {
console.log('初始化完成')
},
+ },
+ watch: {
+ imageUrl() {
+ this.imageDimensions = null
+ }
}
}
@@ -215,10 +252,10 @@ export default {
}
.license-image {
- width: 60%;
- height: 60%;
- max-width: 60%;
- max-height: 60%;
+ width: auto;
+ height: auto;
+ max-width: 100%;
+ max-height: 100%;
display: block;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);