使用 Base64 GoLang 模板显示图像

Question

我正在尝试在 GoLang 中使用 Base 64 显示图像。我看过各种例子，到处都是相同的模式。这是我的代码：

{{template "base" .}}

{{define "content"}}
    {{$item := index .Data "item"}}
    {{$image := index .Data "image"}}
    
    <img src="data:image/png;base64," + {{$image.ImageDataBase64}} alt="Blank"/>
    {{$image.ImageDataBase64}}
{{end}}

请注意，我首先尝试使用 base64 显示图像，然后打印 base64 以确保一切正常。这是我得到的结果：

所以，它实际上显示了base64，但是当我在标签中插入base64时它不显示图像。为什么？

这是我创建 base64 的方式：

package images

import (
    "bytes"
    "encoding/base64"
    "fmt"
    "image/jpeg"
    "image/png"
    "io/ioutil"
    "log"
    "net/http"
)

var TmpDirectory string // Temorary Directory where all images in current session wil be stored

func setupCorsResponse(w *http.ResponseWriter, r *http.Request) {
    (*w).Header().Set("Access-Control-Allow-Origin", "*")
    (*w).Header().Set("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE")
    (*w).Header().Set("Access-Control-Allow-Headers", "Accept, Content-Type, Content-Length, Authorization")
}

func HandleUpload(w http.ResponseWriter, r *http.Request, formFileName string) (string, string, error) {
    // Maximum upload of 10 MB files r.ParseMultipartForm(1 << 2)

    file, handler, err := r.FormFile(formFileName)
    if err != nil {
        // If there is an error that means form is empty. Return nil for err in order
        // to validate result as required.
        return "", "", nil
    }

    defer file.Close()

    fmt.Printf("Uploaded File: %+v\n", handler.Filename)
    fmt.Printf("File Size: %+v\n", handler.Size)
    fmt.Printf("MIME Header: %+v\n", handler.Header)

    data, err := ioutil.ReadAll(file)
    if err != nil {
        log.Println(err)
        return "", "", err
    }

    contentType := http.DetectContentType(data)

    switch contentType {
    case "image/png":
        fmt.Println("Image type is already PNG.")
    case "image/jpeg":
        fmt.Println("Image type is JPG, converting it to PNG.")
        img, err := jpeg.Decode(bytes.NewReader(data))
        if err != nil {
            return "", "", fmt.Errorf("unable to decode jpeg: %w", err)
        }
        var buf bytes.Buffer

        if err := png.Encode(&buf, img); err != nil {
            return "", "", fmt.Errorf("unable to encode png")
        }
        data = buf.Bytes()
    default:
        return "", "", fmt.Errorf("unsupported content type: %s", contentType)
    }
    //convert the buffer bytes to base64 string - use buf.Bytes() for new image
    imgBase64Str := base64.StdEncoding.EncodeToString(data)
    return handler.Filename, imgBase64Str, nil
}

我做错了什么？

Answer 1

Blank 显示是因为您的失败图片的 alt 文本是 Blank.

<img src="data:image/png;base64," + {{$image.ImageDataBase64}} alt="Blank"/>

如果值为“AAAA”，您的模板输出将是

<img src="data:image/png;base64," + AAAA alt="Blank"/>

您可能想要的需要一个简单的更改：

<img src="data:image/png;base64,{{$image.ImageDataBase64}}" alt="Blank"/>

哪个会产生

<img src="data:image/png;base64,AAAA" alt="Blank"/>

请记住，您不是在构建字符串（或使用 + 运算符连接），您只是在输出字符串的内容。

使用 Base64 GoLang 模板显示图像

Display Image using Base64 GoLang Template

html

base64

go