即时渲染模式下，在无序列表中，img标签的显示规则不一致

a1473838623 commented 6 months ago

编辑模式

ir 即时渲染模式

描述问题

列表开头或结尾有文字，img标签无法渲染；列表内软换行后，img标签同样无法渲染（这个使用场景较多）；列表不添加任何文字，能渲染img标签（但是图片前面有列表的标记，一个小黑点，十分不美观）；列表中在文字之中软换行，使得img标签独立于文字，也能渲染（同样不美观，上下空行太多）；

## img1

- 列表开头有文字，图片无法渲染<img src="https://avatars.githubusercontent.com/u/71368946?v=4">
- <img src="https://avatars.githubusercontent.com/u/71368946?v=4">列表结尾有文字，图片无法渲染
- 列表开头后换一行，图片无法渲染
  <img src="https://avatars.githubusercontent.com/u/71368946?v=4">

## img2

- <img src="https://avatars.githubusercontent.com/u/71368946?v=4">
- 列表开头和结尾均无文字，图片正常渲染

## img3

- 列表开头或结尾有文字，但与开头文字前面隔开一行，同时与结尾文字隔开一行，图片正常渲染

  - 列表1开头文字

<img src="https://avatars.githubusercontent.com/u/71368946?v=4">

列表1结尾文字

- 列表2

期待的结果

能够在列表中软换行后，无需前后空行，就能渲染img标签。就像这样：

- 列表开头后换一行，图片无法渲染 -> 修复后能够渲染
  <img src="https://avatars.githubusercontent.com/u/71368946?v=4">

截屏或录像

版本信息

版本：3.9.8
操作系统：win10 or ubuntu
浏览器：chrome

Vanessa219 commented 6 months ago

用 img 标签且有内容时会解析为 html 代码，这个在最终渲染的时候会出现的，不用担心。建议使用 md 语法![](https://avatars.githubusercontent.com/u/71368946?v=4)

a1473838623 commented 6 months ago

但是IR模式编辑时根本看不到图片呀。使用md语法能解决，但是无法调整大小，使用img标签就是为了无损调整大小。如果直接改原图大小，目前是无法解决在不减少图像精度的情况下缩小图片的。还是希望vditor能够在ir模式支持使用img标签

Vanessa219 commented 6 months ago

这个属于 html 标签，编辑模式下只能显示其源码。否则无法区分 md 和标签。

Vanessa219 / vditor