如何在Next.js的Image组件中设置draggable属性禁止图片拖拽虚影

基础实现 #

原生img标签禁用拖拽虚影的写法是给标签添加draggable="false"属性，该属性可直接透传到Next.js的<Image />组件上，直接添加即可生效：

<Image draggable="false" src="你的图片路径" alt="图片描述" width={宽度数值} height={高度数值} />

浏览器兼容注意事项 #

目前Chrome和Firefox对拖拽禁用特性的实现存在差异，做全浏览器兼容时需要额外注意以下两点：

• 若<Image />组件外层嵌套了<a>标签，Firefox浏览器下需要给父级<a>标签也同步添加draggable="false"属性，才能完全消除拖拽虚影
• 不要在CSS中给img标签、<Image />组件渲染生成的div设置user-select: none属性，该属性会导致draggable配置在Firefox中失效

内容的提问来源于stack exchange，提问作者Tom