为何Base64编码图片无法在Lit组件的img标签中正常显示？

我尝试在Lit组件中用Base64编码展示图片，但组件内仅显示编码字符串，把编码内容复制到新文件却能正常显示图片。

以下是我的代码：

@customElement('image-board')
export class ImageBoard extends LitElement {
    // ...

    @property()
    imgSrc = ""

    render() {
        var img = ""
        if (this.imgSrc != "") {
            img = `<div> <img src="data:image/png;base64,${this.imgSrc}" /> </div>`;
        }

        return html`
            <div id="image-setter">
                ${img}
                <input type="file" id="imageInput" accept="image/png, image/jpeg" />
                <button @click=${this.setImage}>Set Image</button>
            </div>
        `
    }

    // ...
}

我使用lit构建组件，且确认imgSrc要么为空字符串，要么是有效的Base64编码图片内容。我尝试过使用更小尺寸（150×100像素）的图片，但问题依旧。

不过，我通过在组件外添加另一个img标签实现了预期效果：

<img id="outside-image"></img>
<image-board></image-board>

并通过以下代码设置其src：

let node = document.getElementById("outside-image");
node.src = `data:image/png;base64,${this.imgSrc}`

我困惑的是，为何直接通过以下代码无法正常显示图片：

img = `<div> <img src="data:image/png;base64,${this.imgSrc}" /> </div>`;

解决方法 #

核心问题是你在Lit的render方法里直接拼接了HTML字符串，Lit会把这种字符串当作文本内容渲染，而不是解析成DOM元素。Lit的html模板标签专门用来处理模板内容并转换为安全的DOM节点，直接传入字符串的话，它不会解析里面的HTML标签，只会原样输出文本。

正确写法1：用html标签构建图片部分 #

修改render方法，把图片的DOM结构用html标签包裹：

render() {
  const imgContent = this.imgSrc 
    ? html`<div><img src="data:image/png;base64,${this.imgSrc}" /></div>`
    : html``;

  return html`
    <div id="image-setter">
      ${imgContent}
      <input type="file" id="imageInput" accept="image/png, image/jpeg" />
      <button @click=${this.setImage}>Set Image</button>
    </div>
  `;
}

正确写法2：直接绑定src属性 #

用Lit的属性绑定语法.src直接给<img>绑定图片地址，更符合Lit的最佳实践：

render() {
  return html`
    <div id="image-setter">
      ${this.imgSrc ? html`<div><img .src=${`data:image/png;base64,${this.imgSrc}`} /></div>` : html``}
      <input type="file" id="imageInput" accept="image/png, image/jpeg" />
      <button @click=${this.setImage}>Set Image</button>
    </div>
  `;
}

两种写法都能让Lit正确解析<img>标签，将Base64编码内容渲染为图片而非纯文本。

内容的提问来源于stack exchange，提问作者Jeefy