1.图片也用iframe方式

Min
1 parent c13eb85a
Showing 2 changed files with 26 additions and 1 deletions
src/components/Common/CommonTable/index.js
src/components/Common/OfficePreview/index.js
@@ -1296,7 +1296,7 @@ class CommonTableRc extends React.Component {
  
                 let imgBox = <FileOutlined />;
  
-                if (officeFileTypeList.includes(officeFileType)) {
+                if (officeFileTypeList.includes(officeFileType) || imgTypeList.includes(officeFileType)) {
                   imgBox = fileIcon;
                 } else if (imgTypeList.includes(officeFileType)) {
                   imgBox = <span style={{ cursor: 'pointer' }}> <img src={dataUrl} alt="img" onFocus={() => 0} onClick={e => this.handlePreviewImage(e, picAddr, index)} style={{ width: '30px', height: '20px' }} /></span>;
@@ -10,6 +10,7 @@ import &quot;@js-preview/excel/lib/index.css&quot;;
  
 const OfficePreview = props => {
   const { officePreviewVisible, officeFileUrl, onCancel, app } = props;
+  const imgTypeList = ['PNG', 'SVG', 'JPG', 'JPEG', 'GIF', 'BMP', 'TIFF', 'ICO']; /* 常见图片格式列表 */
   const title = officeFileUrl
     .split("/")
     .pop()
@@ -45,6 +46,30 @@ const OfficePreview = props =&gt; {
               <iframe src={fileUrl} style={{ width: '100%', height: '100%' }} frameborder="0"></iframe>
             </div>
           )}
+          {imgTypeList.includes(fileType)&& (
+            <div className="pdfContainer" style={{
+              width: '100%',
+              // height: '100vh',
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              background: '#f5f5f5',
+              boxSizing: 'border-box',
+              padding: 0,
+              margin: 0
+            }}>
+              <img
+                src={fileUrl}
+                style={{
+                  maxWidth: '90%',
+                  maxHeight: '90vh',
+                  objectFit: 'contain',
+                  border: 'none',
+                }}
+                alt="图片预览"
+              />
+            </div>
+          )}
           {['MP4', 'WEBM', 'OGG'].includes(fileType) && (
             <div style={{
               width: "100%",