How to pass draggable attribute to in Next.js Image component?

Question

I want to prevent dragging of ghost image.

Normal way: <img draggable="false">

But I don't know how to set it to <Image /> component

Image component docs: https://nextjs.org/docs/api-reference/next/image

Edit:

<Image draggable="false"/> works, but for Firefox, we need add the same atrribute to parent <a> and in CSS it can't be user-select: none for img and div

It's still difference between Chrome and Firefox.

Adding a CSS rule like `pointer-events: none` should be easier — Kakiz, Nov 25 '21 at 13:54
The Image does support a `ref`, so maybe you can also try to work with that and `onDragStart` — windmaomao, Nov 25 '21 at 13:59

score 1 · Answer 1 · answered Nov 25 '21 at 14:01

1

I don't know about Next.js but if it doesn't allow you to add draggable attribute then you can set it in CSS. I hope the following link helps. https://stackoverflow.com/a/12906840/8900144

answered Nov 25 '21 at 14:01

praneeth

33
6

How to pass draggable attribute to in Next.js Image component?

1 Answers1