如何隐藏 DOM 的 img 标签但显示它们？

Question

（下面更新）我需要在

div

中显示图像（表情符号），属性为

contenteditable

。由于某种原因，我无法使用

img

标签。只是具体情况，还有其他问题。

以下片段包含三个案例：

1. 目标行为：可以显示图像、移动小车、删除图像
2. 错误行为：显示、不移动、不删除
3. 错误行为：显示、移动托架、不删除

如何在没有

contenteditable

标签的情况下在

img

中显示图像并具有保存移动托架和删除图像的功能？

<div contenteditable=true>
  1) img tag:  
  <img alt="Wowee" src="https://cdn.betterttv.net/emote/58d2e73058d8950a875ad027/1x">
</div>

<div contenteditable=true>
  2) span tag:  
  <span style="content: url(https://cdn.betterttv.net/emote/58d2e73058d8950a875ad027/1x)">Wowee</span>
</div>

<div contenteditable=true>
  3) span tag with "nbsp":
  <span style="content: url(https://cdn.betterttv.net/emote/58d2e73058d8950a875ad027/1x)">Wowee</span>
  &nbsp;
</div>

更新1：

答案中的所有解决方案都有不可预测的错误。让我们想象一下

img

允许。但仅用于显示图像。我们可以在 DOM 中隐藏

img

吗？我的意思是

querySelector

和

childNodes

无法获得

img

。

为什么需要它？外部站点有聊天输入字段。用户单击发送后，站点会验证字段中的节点并抛出错误，因为

img

的值未知。因此我想隐藏 DOM 的

img

并隐藏显示的文本。因此验证获取纯文本并跳过

img

。

<div contenteditable=true>
  text
  <img alt="DogePls" class="chat-image chat-line__message--emote" src="https://cdn.betterttv.net/emote/55c7eb723d8fd22f20ac9cc1/1x.webp" srcset="https://cdn.betterttv.net/emote/55c7eb723d8fd22f20ac9cc1/1x.webp 1x, https://cdn.betterttv.net/emote/55c7eb723d8fd22f20ac9cc1/2x.webp 2x, https://cdn.betterttv.net/emote/55c7eb723d8fd22f20ac9cc1/3x.webp 4x">
  
  <div style="
    width: 0.1rem;
    height: 0.1rem;
    border: none;
    clip: rect(0px, 0px, 0px, 0px);
    margin: -0.1rem;
    overflow: hidden;
    padding: 0px;
    position: absolute;">
      <span>DogePls</span>
  </div>

</div>

Answer 1

我不相信内容在这种情况下会起作用，因为：

‘ 使用 CSS content 属性插入的对象是匿名替换元素。它们是“匿名的”，因为它们不存在于 HTML 标记中。’

（来自 MDN）所以我们永远不会让替换的跨度可删除。

因此，这是一种使用背景图像并将字体大小设置为您希望表情符号与周围文本相关的任何大小的方法。

<div contenteditable=true>
  3) span tag with background-image:
  <span contenteditable=false style="display: inline-block; font-size: 2em; background-image: url(https://cdn.betterttv.net/emote/58d2e73058d8950a875ad027/1x); background-size: contain; background-repeat: no-repeat; background-position: center center; text-align: right;">&emsp;</span>
</div>

更新：需要保留 DOM 中 span 元素中的文本，但不要使其可见（从这个意义上说，它被图像替换 - 但如上所述，这不会让我们做正确的事情）事情编辑明智）。

我不确定我是否推荐下面的代码片段，它看起来很繁琐，因此可能容易脆弱，但是如果它在需要它的特定上下文中有用，我将其包含在内。基本上，它将文本保留在跨度中，但通过将跨度的宽度和高度固定为表情符号所需的内容来“替换”它，隐藏溢出文本并通过在顶部放置一个 before 伪元素来伪装剩余文本表情符号图像作为背景。

注意：不可能使文本透明（或字体大小为0），这是我最初的想法，因为插入符号随后消失了。

<style>
  div span {
    --size: 28px;
    /* set to whatever you want the size of the emoji to be */
  }
  
  div span::after {
    content: '';
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: var(--size);
    height: var(--size);
    background-image: url(https://cdn.betterttv.net/emote/58d2e73058d8950a875ad027/1x);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: white;
  }
</style>
<div contenteditable=true style="position: relative;">
  3) span tag with background-image:
  <span contenteditable=false style="width: var(--size); height: var(--size); display: inline-block; color: black; overflow: hidden; white-space: nowrap; text-align: right; position: relative; margin-right: 1px;">Wowee</span>.
</div>

Answer 2

这可能有帮助：

    <div contenteditable=true>
        span tag:
        <span style="content: url(https://cdn.betterttv.net/emote/58d2e73058d8950a875ad027/1x)">Wowee</span>
        &nbsp;
    </div>

您只需要在跨度后单击一些可选区域即可添加它，或者您可以使用 css（填充等）来做到这一点。

Answer 3

我不知道它为什么有效（Chrome），但你看：

（顺便说一句，在 Firefox 中，您的所有 3 个示例都可以工作，您需要按退格键 3 次，但它们确实可以）

<div contenteditable>
  3) span tag with "#8203":
  <span style="content: url(https://cdn.betterttv.net/emote/58d2e73058d8950a875ad027/1x)"></span>
  &#8203;
</div>

（我不建议使用

contenteditable

，因为它充满了错误和意外行为，因此我认为尝试了解发生了什么是没有意义的）