Next.js Discord

Discord Forum

Next Image acting up

Unanswered
Chum salmon posted this in #help-forum
Open in Discord
Chum salmonOP
As you can see in the attached image, each profile image does not cover the container properly while I already set the size for the container, made it relative, and set object-cover and rounded-full in the style. Here is the full code of this component:
import Image from "next/image";

interface CommentBoxProp {
    name: string;
    image: string;
    comment: string;
}

const CommentBox: React.FC<CommentBoxProp> = ({ name="User Name", image = "", comment = "Say something here..."}) => {
    return (
        <div className="flex bg-[var(--secondary)] mt-sm p-sm gap-sm">
            <div className="w-2xl h-2xl relative">
                <Image
                    src={image}
                    alt="Avatar Image"
                    fill
                    className="object-cover rounded-full"
                    priority
                />
            </div>
            <div>
                <span>{name}</span>
                <p className="text-[var(--accent)]">{comment}</p>
            </div>
        </div>
    )
}

export default CommentBox;


PS. I used Next Image before in my other components but this is the first time I have this issue.

2 Replies

Chum salmonOP
I'm about to fix it. I think it conflicts with the second <div> in the flex row since that <div> doesn't have specified width so it depends on the text content that mess up the width and height.
Ok so I set second element in the flex row to flex-1 and it works like a charm.

    return (
        <div className="flex bg-[var(--secondary)] mt-sm p-sm gap-sm">
            <div className="w-2xl h-2xl rounded-full overflow-hidden relative">
                <Image
                    src={image}
                    alt={name}
                    fill
                    priority
                    className="object-cover"
                />
            </div>

            <div className="flex-1">
                <span>{name}</span>
                <p className="text-[var(--accent)]">{comment}</p>
            </div>
        </div>
    )