Conditionally rendering <Image> in Next.js
Answered
neon posted this in #help-forum
neonOP
How do I render an image (using next/image library) only if a certain variable is
But this way, the image just doesn't load even if
true? I tried {myCondition ?? (
<Image
src={vector}
alt="vector"
width={550}
className="absolute left-[60%] justify-center"
/>
)}But this way, the image just doesn't load even if
myCondition is true.Answered by B33fb0n3
try to do it like this:
{myCondition && <Image
src={vector}
alt="vector"
width={550}
className="absolute left-[60%] justify-center"
/>}4 Replies
Orinoco Crocodile
I think you want to use &&
@neon How do I render an image (using next/image library) only if a certain variable is `true`? I tried jsx
{myCondition ?? (
<Image
src={vector}
alt="vector"
width={550}
className="absolute left-[60%] justify-center"
/>
)}
But this way, the image just doesn't load even if `myCondition` is true.
try to do it like this:
{myCondition && <Image
src={vector}
alt="vector"
width={550}
className="absolute left-[60%] justify-center"
/>}Answer
@B33fb0n3 try to do it like this:
tsx
{myCondition && <Image
src={vector}
alt="vector"
width={550}
className="absolute left-[60%] justify-center"
/>}
neonOP
Oh, that was stupid of me lol, tysm!