fix: 处理品牌、商品图片没有放大问题

src/pages/commodity/productWillCheck/checkProducts.tsx

 import React, { useState, useRef, ReactNode, useEffect } from 'react'
 import { history } from 'umi'
-import { Button, Steps, Card, Space, Modal, Form, Row, Col, Descriptions, Table, Tabs, Tag, Divider, Radio, Input } from 'antd'
+import { Button, Steps, Card, Space, Modal, Form, Row, Col, Descriptions, Table, Tabs, Tag, Divider, Radio, Input, Image } from 'antd'
 import { PageHeaderWrapper } from '@ant-design/pro-layout'
 import {
   CaretDownOutlined,
@@ -673,8 +673,13 @@ const viewProducts: React.FC<{}> = () => {
               <div className={styles.productImgBox}>
                 {
                   productDetail?.unitPriceAndPicList[0].commodityPic.length>0 && productDetail?.unitPriceAndPicList[0].commodityPic.map((_item, index) => 
-                    <div key={index} className={styles.imgItem}><img className={styles.pic} src={_item} alt=""/>
-                  </div>)
+                  <Image 
+                    key={index}
+                    width={104}
+                    src={_item} 
+                    alt="商品图片描述"
+                    className={styles.imgItem}
+                  />)
                 }
               </div>
             </> : <>
@@ -701,8 +706,13 @@ const viewProducts: React.FC<{}> = () => {
                   <div className={styles.productImgBox}>
                     {
                       imageArrByImageRender.length>0 && imageArrByImageRender[index].map((_item, _index) => 
-                        <div key={_index} className={styles.imgItem}><img className={styles.pic} src={_item} alt=""/>
-                      </div>)
+                      <Image 
+                        key={_index}
+                        width={104}
+                        src={_item} 
+                        alt="商品图片描述"
+                        className={styles.imgItem}
+                      />)
                     }
                   </div>
                 </div>)
@@ -742,9 +752,14 @@ const viewProducts: React.FC<{}> = () => {
             productDetail?.commodityRemark?.image?.length>0 && 
             <div className={styles.descriptionBox}>
               {
-                productDetail?.commodityRemark?.image.map((_item, _index)=> _item && <div key={_index}  className={styles.imgItem}>
-                  <img src={_item} />
-                </div>)
+                productDetail?.commodityRemark?.image.map((_item, _index)=> _item &&
+                <Image 
+                  key={_index}
+                  width={180}
+                  src={_item} 
+                  alt="商品图片描述"
+                  className={styles.imgItem}
+                />)
               }
             </div>
           }

src/pages/commodity/productWillCheck/index.less

@@ -139,6 +139,7 @@
     height:104px;
     margin-left: 16px;
     border:1px solid rgba(235,236,240,1);
+    object-fit: fill;
   }
   p{
     padding: 16px;
@@ -154,6 +155,7 @@
     height:104px;
     margin-right: 16px;
     border:1px solid rgba(235,236,240,1);
+    object-fit: fill;
     .pic{
       width: 100%;
       height: 100%;

src/pages/commodity/products/index.less

@@ -185,6 +185,9 @@
       top: 50%;
       transform: translate(-50%, -50%); 
     }
+    img{
+      object-fit: fill;
+    }
   }
 }
 .pruduct-status{

src/pages/commodity/products/viewProducts.tsx

 import React, { useState, useRef, ReactNode, useEffect } from 'react'
 import { history } from 'umi'
-import { Button, Steps, Card, Space, Radio, Row, Col, Descriptions, Table, Tabs, Tag, Divider } from 'antd'
+import { Button, Steps, Card, Space, Radio, Row, Col, Descriptions, Table, Tabs, Tag, Divider, Image } from 'antd'
 import { PageHeaderWrapper } from '@ant-design/pro-layout'
 import { ColumnType } from 'antd/lib/table/interface'
 import cx from 'classnames'
@@ -617,7 +617,6 @@ const viewProducts: React.FC<{}> = () => {
       <Space direction="vertical" style={{width:'100%'}}>
         <Card headStyle={{borderBottom:'none'}} title="商品图片">
           {
-            // productDetail?.unitPriceAndPicList[0].attributeAndValueList.length === 0 ? <>
             productDetail?.isAllAttributePic ? <>
               <Row>
                 <Col span={3}>
@@ -631,8 +630,13 @@ const viewProducts: React.FC<{}> = () => {
               <div className={styles.productImgBox}>
                 {
                   productDetail?.unitPriceAndPicList[0].commodityPic.length>0 && productDetail?.unitPriceAndPicList[0].commodityPic.map((_item, index) => 
-                    <div key={index} className={styles.imgItem}><img className={styles.pic} src={_item} alt=""/>
-                  </div>)
+                  <Image
+                    key={index}
+                    className={styles.imgItem}
+                    width={104}
+                    src={_item} 
+                    alt="商品图片" 
+                  />)
                 }
               </div>
             </> : <>
@@ -659,8 +663,13 @@ const viewProducts: React.FC<{}> = () => {
                   <div className={styles.productImgBox}>
                     {
                       imageArrByImageRender.length>0 && imageArrByImageRender[index].map((_item, _index) => 
-                        <div key={_index} className={styles.imgItem}><img className={styles.pic} src={_item} alt=""/>
-                      </div>)
+                      <Image 
+                        key={_index} 
+                        className={styles.imgItem}
+                        width={104}
+                        src={_item} 
+                        alt="商品图片" 
+                      />)
                     }
                   </div>
                 </div>)
@@ -700,9 +709,14 @@ const viewProducts: React.FC<{}> = () => {
             productDetail?.commodityRemark?.image?.length>0 && 
             <div className={styles.descriptionBox}>
               {
-                productDetail?.commodityRemark?.image.map((_item, _index)=> _item && <div key={_index}  className={styles.imgItem}>
-                  <img src={_item} />
-                </div>)
+                productDetail?.commodityRemark?.image.map((_item, _index)=> _item && 
+                  <Image 
+                    key={_index}
+                    width={180}
+                    src={_item} 
+                    alt="商品图片描述"
+                    className={styles.imgItem}
+                  />)
               }
             </div>
           }

src/pages/trademark/trademarkSearch/viewBrand.tsx

 import React, { useState, useRef, ReactNode, useEffect } from 'react'
 import { history } from 'umi'
-import { Button, Steps, Card, Space, Tooltip, Row, Col, Descriptions, Table } from 'antd'
+import { Button, Steps, Card, Space, Tooltip, Row, Col, Descriptions, Table, Image } from 'antd'
 import { PageHeaderWrapper } from '@ant-design/pro-layout'
 import {
   QuestionCircleOutlined,
@@ -119,7 +119,12 @@ const viewBrand: React.FC<{}> = () => {
       let imgArray = Object.values(proveInfo)
        return imgArray.map((item: any, index: number) => <Col key={index} span={3} xxl={3} xl={4} lg={4}>
         <div className={styles.proveBox}>
-          <img src={item} alt=""/>
+          <Image 
+            width={175}
+            height={120}
+            src={item} 
+            alt="品牌相关证明材料" 
+          />
         </div>
       </Col>
       )

src/pages/trademark/trademarkWillCheck/checkBrand.tsx

 import React, { useState, useRef, ReactNode, useEffect } from 'react'
 import { history } from 'umi'
-import { Button, Steps, Card, Space, Tooltip, Row, Col, Descriptions, Table, Form, Modal, Radio, Input } from 'antd'
+import { Button, Steps, Card, Space, Tooltip, Row, Col, Descriptions, Table, Form, Modal, Radio, Input, Image } from 'antd'
 import { PageHeaderWrapper } from '@ant-design/pro-layout'
 import {
   QuestionCircleOutlined,
@@ -129,7 +129,12 @@ const CheckBrand: React.FC<{}> = () => {
       let imgArray = Object.values(proveInfo)
        return imgArray.map((item: any, index: number) => <Col key={index} span={3} xxl={3} xl={4} lg={4}>
         <div className={styles.proveBox}>
-          <img src={item} alt=""/>
+          <Image 
+            width={175}
+            height={120}
+            src={item} 
+            alt="品牌相关证明材料" 
+          />
         </div>
       </Col>
       )