时间戳

首页 > 解决方案 > 如何将变量传递到 html 模板并将它们用作 img 源

html - 如何将变量传递到 html 模板并将它们用作 img 源

问题描述

我正在使用网络服务器。我的目标是使用 base64 字符串加载图像并在网站上显示该图像。base64 字符串应该根据我用来加载模板的变量而有所不同。

这是我的 Go 渲染代码：

varmap := map[string]interface{}{
    "username": discordTag,
    "b64":      "data:image/png;base64,looongstring",
}
fmt.Println("logged in!")
templates.ExecuteTemplate(w, "index.html", varmap)

这是我的 index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>
      <h1>Welcome back, {{ .username }} {{ .b64 }}</h1>
      <img src="{{ .b64 }}"/>
    </div>
  </body>
</html>

用户名的显示工作正常，将 base64 字符串显示为文本也工作正常。 显示用户名作品

查看浏览器呈现的 HTML，img src 显示为“#ZgotmplZ”

标签： htmlimagegotemplates

解决方案

假设您正在使用html/template包转义字符串以防止代码注入。您可以包装您的 base64 数据 URLtemplate.URL以告诉模板引擎如何处理您的字符串。

varmap := map[string]interface{}{
    "username": discordTag,
    "b64":      template.URL("data:image/png;base64,looongstring"),
}

我应该注意，除非图像非常小，否则静态提供它们可能会更好，而不是将它们嵌入到 html 中。

推荐阅读