chore: image optimize

nexmoe · Apr 30, 2024 · efe392c · efe392c
1 parent 1acd987
commit efe392c
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 5 deletions.
diff --git a/components/LinkIcon.vue b/components/LinkIcon.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 interface Props {
 	url: string
+	width?: number
 }
 const props = defineProps<Props>()
 
@@ -17,5 +18,7 @@ function getOrigin(url: string) {
 		:alt="props.url"
 		referrerpolicy="no-referrer"
 		loading="lazy"
+		:width="props.width"
+		:height="props.width"
 	/>
 </template>
diff --git a/components/flow/Index.vue b/components/flow/Index.vue
@@ -73,7 +73,7 @@ provide('flow', props.flow)
 	@apply columns-1 gap-4 lg:columns-2 xl:columns-3 2xl:columns-4;
 }
 
-.flow-body .module {
+.flow-body.n-gallery .module {
 	@apply mb-4;
 }
 </style>
diff --git a/components/module/Gallery.vue b/components/module/Gallery.vue
@@ -17,7 +17,10 @@ const props = defineProps<Props>()
 	<div class="module shu-card p-3 flex flex-col">
 		<div class="flex flex-row items-center pt-1 pb-3 gap-2 px-2">
 			<div class="w-5 h-5 block rounded-full overflow-hidden">
-				<LinkIcon :url="props.module.url" />
+				<LinkIcon
+					:width="20"
+					:url="props.module.url"
+				/>
 			</div>
 			<div>
 				{{ formatDateTime(module.date) }}

diff --git a/components/module/Image.vue b/components/module/Image.vue
@@ -65,7 +65,10 @@ const text = computed(() => extractTextFromHTML(props.module.content))
 						class="w-7 h-7 block"
 						@click="navigateTo(platform, { open: { target: '_blank' }, external: true })"
 					>
-						<LinkIcon :url="platform" />
+						<LinkIcon
+							:width="28"
+							:url="platform"
+						/>
 					</div>
 				</template>
 			</div>

diff --git a/components/public/Header.vue b/components/public/Header.vue
@@ -12,7 +12,7 @@ const config = await useGetConfig()
 	<div class="container header justify-between flex pt-6">
 		<div class="flex-1 flex items-center">
 			<NuxtLink :title="config.siteName" :to="'/'" class="flex items-center gap-2">
-				<NuxtImg :alt="config.siteName" class="w-10 rounded-full" :src="config.avatar" />
+				<NuxtImg :alt="config.siteName" width="40" height="40" class="w-10 rounded-full" :src="config.avatar" />
 				<div class="uppercase">{{ config.siteName }}</div>
 			</NuxtLink>
 		</div>

diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -105,14 +105,21 @@ export default defineNuxtConfig({
 
 	image: {
 		format: ['webp'],
-		quality: 80,
+		quality: 85,
 		domains: [
 			'p3-juejin.byteimg.com',
 			'sns-webpic-qc.xhscdn.com',
 			'cdn.dribbble.com',
 			'picx.zhimg.com',
 			'img.zcool.cn',
 			'image.coolapk.com',
+			'pic1.zhimg.com',
+			'pic2.zhimg.com',
+			'pic3.zhimg.com',
+			'pic4.zhimg.com',
+			'unavatar.io',
+			'i.dawnlab.me',
+			'ipfs.crossbell.io'
 		],
 	},