pic without next/Image

This commit is contained in:
tangly1024
2023-03-12 22:43:50 +08:00
parent b9144b8df8
commit 124d12c7cd
4 changed files with 20 additions and 16 deletions

View File

@@ -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>
)}

View File

@@ -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 ">

View File

@@ -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>

View File

@@ -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 ">