# 撰写消息时图片/文本预览存在问题

**URL:** <https://meta.discourse.org/t/issue-in-image-text-preview-when-writing-a-message/134896>\
**Category:** UX\
**Created:** [2019年十二月2日 18:26 UTC](https://meta.discourse.org/t/issue-in-image-text-preview-when-writing-a-message/134896 "2019-12-02T18:26:31Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)\
**Post date:** [2019年十二月2日 18:26 UTC](https://meta.discourse.org/t/issue-in-image-text-preview-when-writing-a-message/134896/1 "2019-12-02T18:26:32Z")

</div>

在预览中，如果图片前后的文本前后有空行，会出现奇怪的行为。  
示例：

此处没有问题：

 ![image](https://global.discourse-cdn.com/meta/original/3X/6/7/67f1992d0ef9267939d587419a4079a765d8b786.jpeg)

如果在文本前添加空行，文本会从第一张图片的右侧开始。

 ![image](https://global.discourse-cdn.com/meta/original/3X/c/5/c5199dfde9cd2fbc78462e6d00637f4f0f139479.jpeg)

如果在文本后添加空行且文本较短，文本会显示在第二张图片的左侧：

 ![image](https://global.discourse-cdn.com/meta/original/3X/e/4/e4e64b30c3d4415c13776fb2d5db059b2681168e.jpeg)  
如果文本较长，问题就会消失。

这仅出现在预览面板中，在所有这些情况下，最终发布的帖子都不会有布局问题。

如果文本不在 **两张** 图片之间，或者预览中的图片宽度足以占满整个预览面板宽度，则不会出现此问题。

我在 Windows 10 上使用 Chrome。

---

<div class="post-metadata">

**Author:** ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)\
**Post date:** [2019年十二月3日 02:12 UTC](https://meta.discourse.org/t/issue-in-image-text-preview-when-writing-a-message/134896/2 "2019-12-03T02:12:20Z")

</div>

我无法在 Meta 上复现此问题。你能否在此主题的回复中重现该问题？

---

<div class="post-metadata">

**Author:** ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)\
**Post date:** [2019年十二月3日 10:20 UTC](https://meta.discourse.org/t/issue-in-image-text-preview-when-writing-a-message/134896/3 "2019-12-03T10:20:02Z")

</div>

是的，我在 meta.discourse 上截取了这些屏幕截图，在我自己的 Discourse 上也出现了同样的问题。

我在使用 Edge 浏览器时再次尝试，问题依然存在：

 ![image](https://global.discourse-cdn.com/meta/original/3X/d/8/d8bdf629164158070be9c7b07dbaeaa6bdd767a4.jpeg)

此外，该问题似乎仅在上传图片时发生（我直接将猫咪图片粘贴到文本区域），而粘贴图片链接以显示图片时则不会出现此问题。

这是一个动图示例：

 ![ej33XBf2x0](https://global.discourse-cdn.com/meta/original/3X/6/2/62b3e5224e98ecdc2f94671ec92231cdb5a2c432.gif)