在 DirectImage 组件中引入 Next.js 的 Image 组件，添加宽度和高度属性，优化图片加载体验，并移除错误处理逻辑以简化代码结构。

Author: YoungLee-coder

src/components/DirectImage.js

@@ -9,10 +9,13 @@
  */
 
 import { useState, useEffect } from 'react'
+import Image from 'next/image'
 
 export default function DirectImage({
   src,
   alt,
+  width,
+  height,
   className = '',
   style,
   loading = 'lazy',
@@ -24,12 +27,10 @@ export default function DirectImage({
 }) {
   const [imgSrc, setImgSrc] = useState(src)
   const [isLoading, setIsLoading] = useState(true)
-  const [hasError, setHasError] = useState(false)
 
   // 当 src 改变时重置状态
   useEffect(() => {
     setImgSrc(src)
-    setHasError(false)
     setIsLoading(true)
   }, [src])
 
@@ -40,29 +41,30 @@ export default function DirectImage({
 
   const handleError = (e) => {
     console.error(`图片加载失败: ${src}`)
-    setHasError(true)
     setImgSrc(fallback)
     setIsLoading(false)
     onError?.(e)
   }
 
   return (
     <div className={`relative inline-block ${className}`} style={style}>
-      <img
+      <Image
         {...props}
         src={imgSrc}
         alt={alt}
+        width={width || 800}
+        height={height || 600}
         loading={loading}
         onLoad={handleLoad}
         onError={handleError}
+        unoptimized // 关键：不使用 Next.js 的图片优化，直接加载原图
         className={`
           ${isLoading && showLoading ? 'opacity-0' : 'opacity-100'}
           transition-opacity duration-300 ease-in-out
           ${className}
         `}
         style={{
           ...style,
-          display: 'block',
           maxWidth: '100%',
           height: 'auto'
         }}