图片懒加载组件，优化性能，优化SEO

themes/plog/components/BlogPost.js

@@ -2,6 +2,7 @@ import { compressImage } from '@/lib/notion/mapImage'
 import Link from 'next/link'
 import { usePlogGlobal } from '..'
 import { isMobile } from '@/lib/utils'
+import LazyImage from '@/components/LazyImage'
 
 /**
  * 博客照片卡牌
@@ -32,8 +33,9 @@ const BlogPost = (props) => {
             data-aos-once="true"
             data-aos-anchor-placement="top-bottom"
             key={post?.id} className='cursor-pointer relative'>
-            {/* eslint-disable-next-line @next/next/no-img-element */}
-            <img src={pageThumbnail} className='aspect-[16/9] w-full h-full object-cover filter contrast-120' />
+
+            <LazyImage src={pageThumbnail} className='aspect-[16/9] w-full h-full object-cover filter contrast-120' />
+
             <h2 className="text-md absolute left-0 bottom-0 m-4 text-black dark:text-gray-100 text-shadow">
                 {post?.title}
             </h2>
@@ -42,6 +44,7 @@ const BlogPost = (props) => {
                 {post?.category}
                 </Link>
             </div>}
+
         </article>
 
   )