From ff545909c0120b0776f4f192af52d527787d9e60 Mon Sep 17 00:00:00 2001
From: ctw <>
Date: Thu, 16 Jan 2025 09:33:55 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BD=BF=E7=94=A8=E5=9B=BE=E7=89=87=E6=87=92?=
 =?UTF-8?q?=E5=8A=A0=E8=BD=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PreviewImage/index.vue        | 98 +++++++++++---------
 src/views/canteen/canteenDailyMenu/index.vue |  7 +-
 2 files changed, 58 insertions(+), 47 deletions(-)

diff --git a/src/components/PreviewImage/index.vue b/src/components/PreviewImage/index.vue
index ad3044a..a20361b 100644
--- a/src/components/PreviewImage/index.vue
+++ b/src/components/PreviewImage/index.vue
@@ -1,72 +1,78 @@
 <!-- 图片预览 -->
 <script lang="ts" setup name="PreviewImage">
-
 type Props = {
-    src?: string
-    width?: string | number
-    height?: string | number
+	src?: string
+	width?: string | number
+	height?: string | number
 }
 
 const props = withDefaults(defineProps<Props>(), {
-    width: 50,
-    height: 50,
+	width: 50,
+	height: 50,
 })
 
 const realSrc = computed(() => {
-    if (!props.src) return "";
-    let real_src = props.src.split(",")[0];
-    return dispatchUrl(real_src) ?? "";
+	if (!props.src) return ""
+	let real_src = props.src.split(",")[0]
+	return dispatchUrl(real_src) ?? ""
 })
 const realSrcList = computed(() => {
-    if (!props.src) return "";
-    let real_src = props.src.split(",")?.map(v => dispatchUrl(v));
-    return real_src ?? [];
+	if (!props.src) return ""
+	let real_src = props.src.split(",")?.map((v) => dispatchUrl(v))
+	return real_src ?? []
 })
-const realWidth = computed(() => typeof props.width == "string" ? props.width : `${props.width}px`)
-const realHeight = computed(() => typeof props.height == "string" ? props.height : `${props.height}px`)
+const realWidth = computed(() => (typeof props.width == "string" ? props.width : `${props.width}px`))
+const realHeight = computed(() => (typeof props.height == "string" ? props.height : `${props.height}px`))
 
 function dispatchUrl(url?: string) {
-    if (!url) return ""
-    return url.includes('http') ? url : import.meta.env.VITE_IMAGE_BASE_PATH + url
+	if (!url) return ""
+	return url.includes("http") ? url : import.meta.env.VITE_IMAGE_BASE_PATH + url
 }
 </script>
 
 <template>
-    <el-image v-if="props.src" hide-on-click-modal preview-teleported :src="`${realSrc}`" fit="cover"
-        :style="`width:${realWidth};height:${realHeight};`" :preview-src-list="realSrcList">
-        <template #error>
-            <div class="image-slot">
-                <i class="el-icon-picture-outline"></i>
-            </div>
-        </template>
-    </el-image>
-    <div v-else :style="`width:${realWidth};height:${realHeight};`" />
+	<el-image
+		v-if="props.src"
+		hide-on-click-modal
+		preview-teleported
+		:src="`${realSrc}`"
+		fit="cover"
+		:style="`width:${realWidth};height:${realHeight};`"
+		:preview-src-list="realSrcList"
+		loading="lazy"
+	>
+		<template #error>
+			<div class="image-slot">
+				<i class="el-icon-picture-outline"></i>
+			</div>
+		</template>
+	</el-image>
+	<div v-else :style="`width:${realWidth};height:${realHeight};`" />
 </template>
 
-
 <style lang="scss" scoped>
 .el-image {
-    border-radius: 5px;
-    background-color: #ebeef5;
-    box-shadow: 0 0 5px 1px #ccc;
+	border-radius: 5px;
+	background-color: #ebeef5;
+	box-shadow: 0 0 5px 1px #ccc;
 
-    :deep(.el-image__inner) {
-        transition: all 0.3s;
-        cursor: pointer;
+	:deep(.el-image__inner) {
+		transition: all 0.3s;
+		cursor: pointer;
 
-        &:hover {
-            transform: scale(1.2);
-        }
-    }
+		&:hover {
+			transform: scale(1.2);
+		}
+	}
 
-    :deep(.image-slot) {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 100%;
-        height: 100%;
-        color: #909399;
-        font-size: 30px;
-    }
+	:deep(.image-slot) {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 100%;
+		height: 100%;
+		color: #909399;
+		font-size: 30px;
+	}
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/canteen/canteenDailyMenu/index.vue b/src/views/canteen/canteenDailyMenu/index.vue
index ddf45a1..44ae245 100644
--- a/src/views/canteen/canteenDailyMenu/index.vue
+++ b/src/views/canteen/canteenDailyMenu/index.vue
@@ -55,7 +55,12 @@
 					<td v-if="!loading" class="text-center" @click="addFood(3)">晚餐</td>
 					<div class="food_list">
 						<td class="food_list_item" v-for="(item, index) in foodData3" :key="index" @click="delteData(item.tid)">
-							<el-image style="width: 80px; height: 80px" :src="imageBaseUrl + item.picUrl" fit="cover" />
+							<el-image
+								style="width: 80px; height: 80px"
+								loading="lazy"
+								:src="imageBaseUrl + item.picUrl"
+								fit="cover"
+							/>
 							<div class="w-full flex justify-around items-center text-black mt-2">
 								<span>{{ item.name }}</span>
 								<span class="mx-1">|</span>