未显示下一张图片

Question

我有一个 Shadcn UI 轮播，应该显示一堆图像；轮播控件在那里，它们似乎适合屏幕，但图像没有显示。

注意：如果我将属性

fill

替换为宽度和高度，我会看到图像。

这是我的组件：

"use client";

import { getAllImages } from "@/lib/appwrite";
import { useQuery } from "@tanstack/react-query";
import React, { useEffect, useState } from "react";
import {
    Carousel,
    CarouselApi,
    CarouselContent,
    CarouselItem,
    CarouselNext,
    CarouselPrevious,
} from "@/components/ui/carousel";
import Image from "next/image";
import { Loader2, AlertCircle } from "lucide-react";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";

export default function FullScreenCarousel() {
    const [api, setApi] = useState<CarouselApi>();
    const [current, setCurrent] = useState(0);
    const [count, setCount] = useState(0);

    const {
        data: images,
        error,
        isLoading,
    } = useQuery({
        queryKey: ["images"],
        queryFn: getAllImages,
    });

    useEffect(() => {
        if (!api) return;

        setCount(api.scrollSnapList().length);
        setCurrent(api.selectedScrollSnap() + 1);

        api.on("select", () => {
            setCurrent(api.selectedScrollSnap() + 1);
        });
    }, [api]);

    if (isLoading) {
        return (
            <div className="flex justify-center items-center h-screen">
                <Loader2 className="h-12 w-12 animate-spin text-primary" />
            </div>
        );
    }

    if (error || !images || images.length === 0) {
        return (
            <Alert variant="destructive" className="m-4">
                <AlertCircle className="h-4 w-4" />
                <AlertTitle>Error</AlertTitle>
                <AlertDescription>
                    Hubo un problema al cargar las imágenes. Por favor, intenta de nuevo
                    más tarde.
                </AlertDescription>
            </Alert>
        );
    }

    return (
        <div className="h-screen w-full relative">
            <Carousel setApi={setApi} className="h-full">
                <CarouselContent className="h-full">
                    {images.map((image, index) => (
                        <CarouselItem key={image.$id} className="h-full">
                            <div className="relative h-full w-full">
                                <Image
                                    src={image.url}
                                    alt={image.alt}
                                    priority={index === 0}
                                    loading={index === 0 ? "eager" : "lazy"}
                                    className="object-cover"
                                    sizes="100vw"
                                    fill
                                    style={{
                                        objectFit: 'cover'
                                    }}
                                />
                                <div className="absolute inset-0 bg-black bg-opacity-40 flex flex-col justify-end p-6 text-white">
                                    <h2 className="text-2xl md:text-4xl font-bold mb-2">
                                        {image.titulo}
                                    </h2>
                                    <p className="text-sm md:text-lg">{image.descripcion}</p>
                                </div>
                            </div>
                        </CarouselItem>
                    ))}
                </CarouselContent>
                <CarouselPrevious className="absolute left-4 top-1/2 -translate-y-1/2" />
                <CarouselNext className="absolute right-4 top-1/2 -translate-y-1/2" />
            </Carousel>
            <div className="absolute bottom-4 left-1/2 -translate-x-1/2 bg-black bg-opacity-50 text-white px-4 py-2 rounded-full">
                {current} / {count}
            </div>
        </div>
    );
}

根据NextJS文档，我应该能够使用

fill

来填充轮播。有什么建议吗？

Answer 1

为了能够将填充与 object-fit: cover 属性一起使用，您的父 div 应该具有与高度和宽度类相关的属性，然后它将被修复。