优化图片相关

electh · Dec 16, 2024 · 3439871 · 3439871
1 parent a684cc9
commit 3439871
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/src/components/ArticleList/components/ArticleCardCover.jsx b/src/components/ArticleList/components/ArticleCardCover.jsx
@@ -1,12 +1,14 @@
 import { useEffect, useRef, useState } from "react";
 import { Image } from "@nextui-org/react";
 import { cn } from "@/lib/utils.js";
+import { getReferrerPolicy } from "@/lib/utils";
 
 export default function ArticleCardCover({ imageUrl }) {
   const [error, setError] = useState(false);
   const [isVisible, setIsVisible] = useState(false);
   const [loading, setLoading] = useState(true);
   const imgRef = useRef(null);
+  const referrerPolicy = getReferrerPolicy(imageUrl);
 
   useEffect(() => {
     const imgElement = imgRef.current;
@@ -68,6 +70,7 @@ export default function ArticleCardCover({ imageUrl }) {
           onError={() => setError(true)}
           radius="none"
           loading="lazy"
+          referrerPolicy={referrerPolicy}
           removeWrapper
           classNames={{
             img: "object-cover w-full aspect-video",

diff --git a/src/components/ArticleView/components/ArticleImage.jsx b/src/components/ArticleView/components/ArticleImage.jsx
@@ -10,6 +10,8 @@ export default function ArticleImage({ imgNode }) {
 
   const { src, alt = "" } = imgNode.attribs;
 
+  const referrerPolicy = getReferrerPolicy(src);
+
   const handleImageClick = (e) => {
     e.preventDefault();
 
@@ -48,8 +50,8 @@ export default function ArticleImage({ imgNode }) {
 
   if (error) {
     return (
-      <div className="w-full h-full min-h-[200px] bg-content2 flex items-center justify-center">
-        <div className="flex flex-col items-center gap-2 text-content2-foreground">
+      <div className="!max-w-[calc(100%+40px)] -mx-5 h-full min-h-[200px] bg-content2 flex items-center justify-center">
+        <div className="flex flex-col items-center gap-2 text-default-500">
           <ImageOff className="size-5" />
           <span className="text-sm">图片加载失败</span>
         </div>
@@ -69,7 +71,7 @@ export default function ArticleImage({ imgNode }) {
         src={src}
         alt={alt}
         loading="lazy"
-        referrerPolicy={getReferrerPolicy(src)}
+        referrerPolicy={referrerPolicy}
         onError={() => setError(true)}
         onClick={handleImageClick}
       />