如何将可拖动属性传递给 Next.js Image 组件中的 <img>？

Posted 2023-03-06

【中文标题】如何将可拖动属性传递给 Next.js Image 组件中的 <img>？

【英文标题】：How to pass draggable attribute to <img> in Next.js Image component?

【发布时间】：2022-01-03 19:07:42

【问题描述】：

我想防止拖拽重影。

正常方式： <img draggable="false">

但是不知道怎么设置成<Image />组件

图像组件文档： https://nextjs.org/docs/api-reference/next/image

编辑：

<Image draggable="false"/> 有效，但对于 Firefox，我们需要为父级 <a> 添加相同的属性，而在 CSS 中，img 和 div 不能是 user-select: none

Chrome 和 Firefox 还是有区别的。

【问题讨论】：

添加像pointer-events: none这样的CSS规则应该更容易

图像确实支持ref，所以也许你也可以尝试使用它和onDragStart

【参考方案1】：

我不知道 Next.js，但如果它不允许您添加可拖动属性，那么您可以在 CSS 中设置它。我希望以下链接对您有所帮助。 https://***.com/a/12906840/8900144