# 表格编辑器破坏嵌入式图片

**URL:** https://meta.discourse.org/t/table-editor-breaks-embedded-images/314831
**Category:** Bug
**Tags:** table-builder, fixed
**Created:** [2024年七月3日 17:16 UTC](https://meta.discourse.org/t/table-editor-breaks-embedded-images/314831 "2024-07-03T17:16:08Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![lindsey](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lindsey/32/318210_2.png) [@lindsey](https://meta.discourse.org/u/lindsey)
#### Post date: [2024年七月3日 17:16 UTC](https://meta.discourse.org/t/table-editor-breaks-embedded-images/314831/1 "2024-07-03T17:16:08Z")

</div>

## ℹ 概述

目前，您可以在表格中嵌入图片，前提是转义替代文本中的任何 `|`，方法是用 `\\` 进行转义（例如，`![image\\|100x100]`）。但是，如果您打开表格编辑器，`\\` 会被删除，图片也会显示异常。

## 🚶‍♀️ 复现步骤

1. 在帖子中创建一个表格，并插入一张图片，用 `\\` 转义替代文本中的 `|`。

2. 保存帖子。图片应在表格中正常显示。

3. 点击铅笔图标打开表格编辑器。此时您可以看到图片替代文本中的 `/` 已被删除。  
 ![CleanShot 2024-07-03 at 13.10.22](https://global.discourse-cdn.com/meta/original/4X/b/7/d/b7dd56a8eea4c8104c5e38b8c7b1ed6124226e9d.png)

4. 点击 保存。

## ✅ 预期结果

图片应按预期显示。打开表格编辑器时，不应从图片替代文本中删除 `\\`。

## ❌ 实际结果

`\\` 从替代文本中被删除，图片显示异常。

## 📚 其他信息

🎥 录屏：

---

<div class="post-metadata">

### Author: ![Lhc\_fl](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lhc_fl/32/268115_2.png) [@Lhc\_fl](https://meta.discourse.org/u/Lhc_fl)
#### Post date: [2024年七月5日 01:54 UTC](https://meta.discourse.org/t/table-editor-breaks-embedded-images/314831/3 "2024-07-05T01:54:20Z")

</div>

我提交了一个 PR 来修复这个问题 🙂

> <https://github.com/discourse/discourse/pull/27726>
>
> The original table builder does not escape \`|\`, which causes syntax like \`!\[imag…e|50x50\](url)\` to be recognized as two different cells. This PR fixes this issue.
> 
> Before: https://global.discourse-cdn.com/meta/original/4X/0/9/5/09570ed7865ea704722528520d074378accf534c.mp4
> 
> After:
> !\[image\](https://github.com/discourse/discourse/assets/41134017/10811ec0-a58f-4c21-a9b0-075ebf021f5a)
> !\[image\](https://github.com/discourse/discourse/assets/41134017/d39ec59b-457f-43c7-b4a2-5726192bbf96)
> !\[image\](https://github.com/discourse/discourse/assets/41134017/9339eea2-6271-4f0d-95da-7ef2209c8de2)
> 
> Related meta topic: https://meta.discourse.org/t/table-editor-breaks-embedded-images/314831

---

<div class="post-metadata">

### Author: ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [2024年七月5日 07:06 UTC](https://meta.discourse.org/t/table-editor-breaks-embedded-images/314831/4 "2024-07-05T07:06:33Z")

</div>

是否修复了编辑表格时图片损坏的问题，还是需要转义管道符？

---

<div class="post-metadata">

### Author: ![Lhc\_fl](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lhc_fl/32/268115_2.png) [@Lhc\_fl](https://meta.discourse.org/u/Lhc_fl)
#### Post date: [2024年七月5日 07:08 UTC](https://meta.discourse.org/t/table-editor-breaks-embedded-images/314831/5 "2024-07-05T07:08:58Z")

</div>

它无法自动修复过去因未转义而损坏的图片。您必须手动修复它们。

编辑表格时不需要转义。

这三张图片分别显示了表格编辑器、生成的 Markdown 和最终渲染效果。

 ![image](https://global.discourse-cdn.com/meta/original/4X/6/1/9/619c08813e7ab8925f60c090195bcd733f5d3c57.png)  
 ![image](https://global.discourse-cdn.com/meta/original/4X/6/1/6/61616078384fba637f421f0409c88ebddddd5d27.png)  
 ![image](https://global.discourse-cdn.com/meta/original/4X/9/3/d/93d6c8f30c5d310e5c65e60c6a38d5fded81d1ed.png)

---

<div class="post-metadata">

### Author: ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [2024年七月5日 07:16 UTC](https://meta.discourse.org/t/table-editor-breaks-embedded-images/314831/6 "2024-07-05T07:16:50Z")

</div>

我更像是一个面向未来的家伙😂 我的用户都是非常普通的手机用户。仅仅是指导他们如何制作一个简单的表格就已经是一项艰巨的任务了，因为——抱歉——markdown 对用户来说远非友好。但我们不讨论那个话题，但这正是我从未教过如何使用表格中图片的原因。转义作为一个概念对他们来说是完全陌生的，甚至是可怕的，如果我告诉他们还有另一个需要记住的众多东西……嗯，最好简单地说他们不能使用图片。

但如果我理解正确的话，那个固定的编辑问题已经解决了，但转义管道符的需要仍然存在。

---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [2024年七月8日 07:00 UTC](https://meta.discourse.org/t/table-editor-breaks-embedded-images/314831/7 "2024-07-08T07:00:39Z")

</div>

该主题在 3 天后自动关闭。不再允许回复。
