From 124d12c7cd3c3233d43dd4f3cae2f51e247a5185 Mon Sep 17 00:00:00 2001
From: tangly1024 <mail@tangly1024.com>
Date: Sun, 12 Mar 2023 22:43:50 +0800
Subject: [PATCH] pic without next/Image

---
 themes/hexo/components/BlogPostCard.js   | 10 +++++-----
 themes/hexo/components/Header.js         |  8 +++++---
 themes/matery/components/BlogPostCard.js | 10 +++++-----
 themes/matery/components/Header.js       |  8 +++++---
 4 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/themes/hexo/components/BlogPostCard.js b/themes/hexo/components/BlogPostCard.js
index 02940295..e3e3d7ff 100644
--- a/themes/hexo/components/BlogPostCard.js
+++ b/themes/hexo/components/BlogPostCard.js
@@ -4,7 +4,7 @@ import React from 'react'
 import TagItemMini from './TagItemMini'
 import CONFIG_HEXO from '../config_hexo'
 import NotionPage from '@/components/NotionPage'
-import Image from 'next/image'
+// import Image from 'next/image'
 
 const BlogPostCard = ({ post, showSummary, siteInfo }) => {
   const showPreview = CONFIG_HEXO.POST_LIST_PREVIEW && post.blockMap
@@ -97,12 +97,12 @@ const BlogPostCard = ({ post, showSummary, siteInfo }) => {
            <div className="flex overflow-hidden md:w-5/12 h-full">
                 <Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
                     {/* eslint-disable-next-line @next/next/no-img-element */}
-                    {/* <img
+                    <img
                         src={post?.page_cover}
                         alt={post.title}
                         className="w-full cursor-pointer object-cover duration-200 hover:scale-125 "
-                    /> */}
-                    <div className='relative w-full h-full'>
+                    />
+                    {/* <div className='relative w-full h-full'>
                     <Image
                      className='hover:scale-125 transition cursor-pointer duration-500'
                      src={post?.page_cover}
@@ -112,7 +112,7 @@ const BlogPostCard = ({ post, showSummary, siteInfo }) => {
                      blurDataURL='/bg_image.jpg'
                      style={{ objectFit: 'cover' }}
                      fill/>
-                    </div>
+                    </div> */}
                 </Link>
             </div>
         )}
diff --git a/themes/hexo/components/Header.js b/themes/hexo/components/Header.js
index d6fff722..81b2fe2e 100644
--- a/themes/hexo/components/Header.js
+++ b/themes/hexo/components/Header.js
@@ -1,4 +1,4 @@
-import Image from 'next/image'
+// import Image from 'next/image'
 import { useEffect, useState } from 'react'
 import Typed from 'typed.js'
 import CONFIG_HEXO from '../config_hexo'
@@ -59,11 +59,13 @@ const Header = props => {
             className="w-full h-screen bg-black text-white relative"
         >
             <div className='w-full h-full'>
-                <Image src={siteInfo.pageCover} fill
+                {/* <Image src={siteInfo.pageCover} fill
                     style={{ objectFit: 'cover' }}
                     className='opacity-70'
                     placeholder='blur'
-                    blurDataURL='/bg_image.jpg' />
+                    blurDataURL='/bg_image.jpg' /> */}
+                {/* eslint-disable-next-line @next/next/no-img-element */}
+                <img src={siteInfo.pageCover} className='h-full w-full object-cover opacity-70 ' />
             </div>
 
             <div className="absolute bottom-0 flex flex-col h-full items-center justify-center w-full ">
diff --git a/themes/matery/components/BlogPostCard.js b/themes/matery/components/BlogPostCard.js
index e7da2f17..18ae7c47 100644
--- a/themes/matery/components/BlogPostCard.js
+++ b/themes/matery/components/BlogPostCard.js
@@ -3,7 +3,7 @@ import Link from 'next/link'
 import React from 'react'
 import TagItemMini from './TagItemMini'
 import CONFIG_MATERY from '../config_matery'
-import Image from 'next/image'
+// import Image from 'next/image'
 
 const BlogPostCard = ({ post, showSummary, siteInfo }) => {
   const showPreview = CONFIG_MATERY.POST_LIST_PREVIEW && post.blockMap
@@ -28,12 +28,12 @@ const BlogPostCard = ({ post, showSummary, siteInfo }) => {
                   <Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
                       <div className="flex flex-grow w-full relative duration-200 bg-black rounded-t-md  cursor-pointer transform overflow-hidden">
                           {/* eslint-disable-next-line @next/next/no-img-element */}
-                          {/* <img
+                          <img
                               src={post?.page_cover}
                               alt={post.title}
                               className="opacity-50 h-full w-full hover:scale-125 rounded-t-md  transform object-cover duration-500"
-                          /> */}
-                          <div className='relative w-full'>
+                          />
+                          {/* <div className='relative w-full'>
                             <Image
                             className='hover:scale-125 opacity-50 transition cursor-pointer duration-500'
                             src={post?.page_cover}
@@ -43,7 +43,7 @@ const BlogPostCard = ({ post, showSummary, siteInfo }) => {
                             blurDataURL='/bg_image.jpg'
                             style={{ objectFit: 'cover' }}
                             fill/>
-                          </div>
+                          </div> */}
                           <span className='absolute bottom-0 left-0 text-white p-6 text-2xl replace' > {post.title}</span>
                       </div>
                   </Link>
diff --git a/themes/matery/components/Header.js b/themes/matery/components/Header.js
index b24ff85d..d230b0ba 100644
--- a/themes/matery/components/Header.js
+++ b/themes/matery/components/Header.js
@@ -1,4 +1,4 @@
-import Image from 'next/image'
+// import Image from 'next/image'
 import { useEffect, useState } from 'react'
 import Typed from 'typed.js'
 import CONFIG_MATERY from '../config_matery'
@@ -90,11 +90,13 @@ const Header = props => {
             className="md:bg-fixed w-full h-screen bg-black text-white relative"
         >
             <div className='w-full h-full absolute'>
-                <Image src={siteInfo.pageCover} fill
+                {/* <Image src={siteInfo.pageCover} fill
                     style={{ objectFit: 'cover' }}
                     className='opacity-70'
                     placeholder='blur'
-                    blurDataURL='/bg_image.jpg' />
+                    blurDataURL='/bg_image.jpg' /> */}
+                     {/* eslint-disable-next-line @next/next/no-img-element */}
+                <img src={siteInfo.pageCover} className='h-full w-full object-cover opacity-70 ' />
             </div>
 
             <div className="absolute flex flex-col h-full items-center justify-center w-full ">