63 lines
1.9 KiB
JavaScript
63 lines
1.9 KiB
JavaScript
/**
|
|
* 图片预览组件
|
|
* 显示图片预览及基本信息，支持错误处理和点击放大
|
|
*
|
|
* 用法:
|
|
* <ImagePreview
|
|
* image={imageObject}
|
|
* isInModal={false}
|
|
* onEnlarge={handleEnlarge}
|
|
* />
|
|
*
|
|
* @param {Object} image - 图片数据对象
|
|
* @param {boolean} [isInModal=false] - 是否在模态框中显示
|
|
* @param {function} [onEnlarge] - 点击放大回调函数
|
|
*/
|
|
import React from 'react';
|
|
import DTAI_SITE from './DEFINE.js';
|
|
|
|
const ImagePreview = ({ image, isInModal = false, onEnlarge }) => {
|
|
/**
|
|
* 获取图片预览URL
|
|
* @param {string} imagePath - 图片路径
|
|
* @returns {string} 完整图片URL
|
|
*/
|
|
const getImagePreviewUrl = (imagePath) => {
|
|
if (!imagePath) return '';
|
|
return `${DTAI_SITE}${imagePath}`;
|
|
};
|
|
|
|
const previewUrl = getImagePreviewUrl(image.imagePath);
|
|
const imageSizeInfo = image.imageSize ? `大小: ${image.imageSize}` : '大小: 未知';
|
|
const resolutionInfo = image.imageWidth && image.imageHeight
|
|
? `分辨率: ${image.imageResolution}`
|
|
: '分辨率: 未知';
|
|
|
|
return (
|
|
<div className={`image-preview-container ${isInModal ? 'modal-preview' : ''}`}>
|
|
{previewUrl ? (
|
|
<div className="image-wrapper">
|
|
<img
|
|
src={previewUrl}
|
|
alt={image.imageName || '预览图'}
|
|
className="image-preview"
|
|
onError={(e) => {
|
|
e.target.onerror = null;
|
|
e.target.src = './pictures/R-C.jpg';
|
|
}}
|
|
title={`${imageSizeInfo}\n${resolutionInfo}`}
|
|
onClick={isInModal && onEnlarge ? () => onEnlarge(previewUrl) : undefined}
|
|
/>
|
|
<div className="image-hover-info">
|
|
<div>{imageSizeInfo}</div>
|
|
<div>{resolutionInfo}</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="image-preview-placeholder">无预览图</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ImagePreview; |