Image组件class无效，width/height百分比无效

[wtto00]

TuSimple/naive-ui version (版本)

2.21.5

Vue version (Vue 版本)

3.2.24

Browser and its version (浏览器及其版本)

Chrome(96.0.4664.45)

System and its version (系统及其版本)

Windows10

Node version (Node 版本)

Reappearance link (重现链接)

https://codesandbox.io/s/recursing-jones-3v9jh?file=/src/Demo.vue

Reappearance steps (重现步骤)

Image组件class无效，width/height百分比无效

Expected results (期望的结果)

Image组件class有效，width/height百分比有效

Actual results (实际的结果)

Image组件class无效，width/height百分比无效

Remarks (补充说明)

[07akioni]

因为功能需求，naive 的图片需要重新套一个 div，你写的样式会直接挂到 div 上，你需要两层一起配合才能正常的使用图片。

使用 img-props 来给 img 元素加样式。

[wtto00]

因为功能需求，naive 的图片需要重新套一个 div，你写的样式会直接挂到 div 上，你需要两层一起配合才能正常的使用图片。

使用 img-props 来给 img 元素加样式。

不是呀，我这里说的无效就是对包裹图片的div无效，不是对img标签无效，所以不是img-props这个属性。

1. 写的class在div上面是无效的，class确实在div上面了，但是div上面没有style scoped的那个组件唯一key值，所以写的class样式对包裹图片的div元素是无效的。如果没有scoped的样式，就可以有效。
2. 我看到文档中NImage有写width="100"属性，是有效的。但是写width="100%"就无效。height="100%"也无效。

看重现链接呀
@07akioni

[wtto00]

jsx丢失scopedId的问题，可以看下这个解决方案 vuejs/babel-plugin-jsx#51 (comment)

[07akioni]

因为功能需求，naive 的图片需要重新套一个 div，你写的样式会直接挂到 div 上，你需要两层一起配合才能正常的使用图片。
使用 img-props 来给 img 元素加样式。

不是呀，我这里说的无效就是对包裹图片的div无效，不是对img标签无效，所以不是img-props这个属性。

1. 写的class在div上面是无效的，class确实在div上面了，但是div上面没有style scoped的那个组件唯一key值，所以写的class样式对包裹图片的div元素是无效的。如果没有scoped的样式，就可以有效。
2. 我看到文档中NImage有写width="100"属性，是有效的。但是写width="100%"就无效。height="100%"也无效。

看重现链接呀 @07akioni

width 和 height 都会直接传给 img 作为属性 width 和 height，根据标准百分比是不生效的，不过这个我感觉多少有点反直觉。

所以我应该会想办法让百分比也能 work。

[07akioni]

jsx丢失scopedId的问题，可以看下这个解决方案 vuejs/jsx-next#51 (comment)

关于 class 实际上还真不是你理解的那个原因，不然的话你看 card 就挂上了 scopeId，从根本上讲是 vue 对 fragment 的处理，导致 scopeId 没能落在 image 上，image 因为实现了预览功能所以内部使用了 fragment。这个应该可以通过调整 VDOM 结构解决，我周末试试。

本质原因在这里：vuejs/core#2549

[wtto00]

主要是scopeId丢失的问题，有了scopeId可以写class的话，我一般不会直接在元素上面写样式

[07akioni]

scope id 给了，百分比的话我想了想还是算了，感觉比较 hack，还是让用户直接控制比较好