-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How should I use next/image? #368
Comments
Mmm i dont understand what do you mean by using as src prop. Src prop has to be a string i think, not a component |
You could provide an Here's how you can use it: <Avatar>
<AvatarImage asChild src='/next.svg'>
<Image src='/next.svg' alt='logo' width={40} height={40} />
</AvatarImage>
<AvatarFallback>N</AvatarFallback>
</Avatar> Notice that I provide After I checked the rendered HTML, the result is the same as the Image component. For more information check Radix UI Avatar API Reference and documentation on how to use ComparisonHere are comparisons between different configurations to help see the difference: The code: <div className='border rounded w-56 border-stone-800 p-4'>
<p>Next Image</p>
<Image src='/next.svg' alt='logo' width={40} height={40} className='my-4'><Image />
</div>
<div className='border rounded w-56 border-stone-800 p-4'>
<p>shadcn-ui Avatar</p>
<Avatar>
<AvatarImage src='/next.svg' alt='logo' />
<AvatarFallback>N</AvatarFallback>
</Avatar>
</div>
<div className='border rounded w-56 border-stone-800 p-4'>
<p>shadcn-ui Avatar + img tag</p>
<Avatar>
<AvatarImage asChild src='/next.svg'>
<img src='/next.svg' alt='logo' />
</AvatarImage>
<AvatarFallback>N</AvatarFallback>
</Avatar>
</div>
<div className='border rounded w-56 border-stone-800 p-4'>
<p>shadcn-ui Avatar + Next Image (asChild, without src)</p>
<Avatar>
<AvatarImage asChild>
<Image src='/next.svg' alt='logo' width={40} height={40} />
</AvatarImage>
<AvatarFallback>N</AvatarFallback>
</Avatar>
</div>
<div className='border rounded w-56 border-stone-800 p-4'>
<p>shadcn-ui Avatar + Next Image (asChild, with src)</p>
<Avatar>
<AvatarImage asChild src='/next.svg'>
<Image src='/next.svg' alt='logo' width={40} height={40} />
</AvatarImage>
<AvatarFallback>N</AvatarFallback>
</Avatar>
</div> Rendered HTML: <div class="border rounded w-56 border-stone-800 p-4">
<p>Next Image</p>
<img
alt="logo"
loading="lazy"
width="40"
height="40"
decoding="async"
data-nimg="1"
class="my-4"
style="color: transparent"
src="/next.svg" />
</div>
<div class="border rounded w-56 border-stone-800 p-4">
<p>shadcn-ui Avatar</p>
<span class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full">
<img class="aspect-square h-full w-full" alt="logo" src="/next.svg"/>
</span>
</div>
<div class="border rounded w-56 border-stone-800 p-4">
<p>shadcn-ui Avatar + img tag</p>
<span class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full">
<img src="/next.svg" alt="logo" class="aspect-square h-full w-full"/>
</span>
</div>
<div class="border rounded w-56 border-stone-800 p-4">
<p>shadcn-ui Avatar + Next Image (asChild, without src)</p>
<span class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full">
<span class="flex h-full w-full items-center justify-center rounded-full bg-muted">
N
</span>
</span>
</div>
<div class="border rounded w-56 border-stone-800 p-4">
<p>shadcn-ui Avatar + Next Image (asChild, with src)</p>
<span class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full">
<img
alt="logo"
loading="lazy"
width="40"
height="40"
decoding="async"
data-nimg="1"
class="aspect-square h-full w-full"
src="/next.svg"
style="color: transparent"/>
</span>
</div> Hope this helps @angelhodar |
@raffizulvian Thank you so much for the detailed explanation!!! I think I just have to try to understand the |
You're welcome! To add a little bit, apparently, the reason why we need to provide |
You could use Code:
|
What folder should the image be placed? Inside public? |
Best to import it statically and let next sort it import image from "./image.jpeg";
....
<Image src={image} /> I wrote a little component that lets you use // components/ui/nextAvatar.tsx
import { ImageProps, getImageProps } from "next/image";
import { omit, pick } from "lodash/fp";
import {
Avatar,
AvatarFallback,
AvatarImage,
} from "@/components/ui/avatar";
type Props = Omit<ImageProps, "fill">;
export default function NextAvatar(props: Props) {
const imageProps = getImageProps({ width: 40, height: 40, ...props }).props;
return (
<Avatar
className={props.className}
style={pick(["width", "height"], imageProps)}
>
<AvatarImage
{...omit(["blurWidth", "blurHeight", "style"], imageProps)}
style={pick(["objectFit", "objectPosition"], imageProps.style)}
/>
{imageProps.placeholder === "blur" && (
<AvatarFallback style={imageProps.style} />
)}
</Avatar>
);
} |
Just a heads up, this will load the image twice. Once by Radix and once by Next |
Hey! First of all thanks for this amazing library. I was looking for them to use in my project and I am just wondering how the AvatarImage component integrates with the next/image component. I am using it in my project so I am worried about poor performance when using this component on anyone that accepts an image src as prop.
Thanks in advance!
The text was updated successfully, but these errors were encountered: