解决invoice的图片显示问题

src/views/invoice/Detail.jsx

@@ -5,17 +5,17 @@ import { PlusOutlined } from "@ant-design/icons";
 import { isNotEmpty } from "@/utils/commons";
 import * as config from "@/config";
 import dayjs from "dayjs";
-import { fetchInvoiceDetail, postEditInvoiceDetail, postAddInvoice } from '@/stores/Invoice';
+import { fetchInvoiceDetail, postEditInvoiceDetail, postAddInvoice } from "@/stores/Invoice";
-import { removeFeedbackImages } from '@/stores/Feedback';
+import { removeFeedbackImages } from "@/stores/Feedback";
-import BackBtn from '@/components/BackBtn';
+import BackBtn from "@/components/BackBtn";
 import { usingStorage } from "@/hooks/usingStorage";
 
-const { Title,Text } = Typography;
+const { Title, Text } = Typography;
 
 function Detail() {
 	const navigate = useNavigate();
 	const { GMDSN, GSN } = useParams();
-  const {userId, travelAgencyId, loginToken} = usingStorage();
+	const { userId, travelAgencyId, loginToken } = usingStorage();
 	const [form] = Form.useForm();
 	const [dataLoading, setDataLoading] = useState(false);
 	const [edited, setEdited] = useState(true); //表单是否允许编辑
@@ -99,7 +99,7 @@ function Detail() {
 			});
 	}
 
-	const fileList = (invoicekImages);
+	const fileList = invoicekImages;
 	//图片列表
 	let arrimg = [];
 	if (isNotEmpty(fileList)) {
@@ -193,18 +193,18 @@ function Detail() {
 		}
 	}
 
-  const invoiceStatus = (FKState) => {
+	const invoiceStatus = FKState => {
 		switch (FKState - 1) {
 			case 1:
-        return 'Submitted';
+				return "Submitted";
 			case 2:
-        return 'Travel Advisor';
+				return "Travel Advisor";
 			case 3:
-        return 'Finance Dept';
+				return "Finance Dept";
 			case 4:
-        return 'Paid';
+				return "Paid";
 			default:
-        return '';
+				return "";
 		}
 	};
 
@@ -218,7 +218,7 @@ function Detail() {
 						<Row key={data.GMD_SN} gutter={16}>
 							<Col span={4}></Col>
 							<Col span={16}>
-								<Card type="inner" title={"Invoice " + ++index}>
+								<Card type="inner" title={"Invoice " + (index + 1)}>
 									<Row gutter={16}>
 										<Col span={12}>
 											<Descriptions column={1}>
@@ -232,13 +232,15 @@ function Detail() {
 											<Image.PreviewGroup>
 												{invoicePicList[index] &&
 													invoicePicList[index].map(item => {
+														if (item.url) {
 															return <Image key={item.uid} width={90} src={item.url} />;
+														}
 													})}
 											</Image.PreviewGroup>
 										</Col>
 									</Row>
 								</Card>
-								{addButton(index++ == invoiceZDDetail.length)}
+								{addButton(index + 1 == invoiceZDDetail.length)}
 							</Col>
 							<Col span={4}></Col>
 						</Row>
@@ -251,7 +253,7 @@ function Detail() {
 							<Col span={16}>
 								<Card
 									type="inner"
-									title={"Invoice " + ++index}
+									title={"Invoice " + (index + 1)}
 									extra={
 										<Button type="link" onClick={() => setEdited(false)}>
 											Edit
@@ -283,21 +285,25 @@ function Detail() {
 													]}>
 													<Select placeholder="Select Currency type" onChange={onCurrencyChange} options={bindCurrency()}></Select>
 												</Form.Item>
-												<Form.Item name="info_date" label="Due Month"
+												<Form.Item
+													name="info_date"
+													label="Due Month"
 													rules={[
 														{
-															required:true,
+															required: true,
-															message:"please select Due Month!",
+															message: "please select Due Month!",
 														},
-													]}
+													]}>
-												>
 													<DatePicker picker="month" />
 												</Form.Item>
-												<Text type="secondary">Payment is arranged during the last week of each month. If the invoice is issued after the 20th, please select the following month for payment. For urgent payments, please contact the travel advisor. </Text>
+												<Text type="secondary">
+													Payment is arranged during the last week of each month. If the invoice is issued after the 20th, please select the following month for payment. For urgent payments, please contact the
+													travel advisor.{" "}
+												</Text>
 												<Form.Item name="info_gmdsn" hidden={true}>
 													<input />
 												</Form.Item>
-												<br/>
+												<br />
 												<Form.Item>
 													<Button type="primary" htmlType="submit">
 														Submit
@@ -314,8 +320,7 @@ function Detail() {
 														listType="picture-card"
 														onChange={handleChange}
 														onRemove={handRemove}
-														accept=".jpg,.png,.peg,.bmp"
+														accept=".jpg,.png,.peg,.bmp">
-														>
 														<div>
 															<PlusOutlined />
 															<div style={{ marginTop: 8 }}>Upload Invoice</div>
@@ -362,4 +367,4 @@ function Detail() {
 	);
 }
 
-export default (Detail);
+export default Detail;