Go言語で画像を表示する方法

前提・実現したいこと

Go言語で画像をアップロードして表示しようとしていましたが、表示の仕方が分かりません。
一度アップロードした写真はダウンロードされてそれを表示しようかと考えております。

└─
├─cmd
│ └─main.go
├─internal
│ └─http
│ └─api.go
│ └─server.go
├─templates
│ └─index.html
│ └─show.html
└─img

該当のソースコード

go
1func Run() {
2	e := echo.New()
3	// リクエストIDの設定
4	e.Use(middleware.RequestID())
5	// loggerの設定
6	e.Use(middleware.Logger())
7	// recoverの設定
8	e.Use(middleware.Recover())
9
10	//TODO what's?  "message": "no matching operation was found"
11	//// validator
12	//spec, err := gen.GetSwagger()
13	//if err != nil {
14	//	panic(err)
15	//}
16	//e.Use(middleware2.OapiRequestValidator(spec))
17
18	e.Static("/", "templates")
19	e.POST("/upload", upload)
20	e.GET("/show", show)
21	e.Logger.Fatal(e.Start(":1232"))
22}
23

go
1func show(c echo.Context) error {
2	files, _ := ioutil.ReadDir("img")
3	for _, f := range files {
4		fmt.Println(f.Name())
5	}
6	return c.HTML(http.StatusOK, "OK")
7}
8

html
1<html>
2
3<head>
4    <title>Test</title>
5</head>
6
7<body>
8    <!---{{template "content" .}}--->
9    <form action="/upload" method="POST" enctype="multipart/form-data">
10        Name: <input type="text" name="name"><br>
11        Description: <input type="text" name="discription"><br>
12        File: <input type="file" name="files" multiple><br><br>
13        <input type="submit" value="Submit">
14    </form>
15    <a href='show.html'>画像一覧</a>
16</body>
17
18</html>

表示するHTMLを追加しました。

html
1<!DOCTYPE html>
2<html>
3
4<head>
5    <meta charset="utf-8">
6    <title>画像をある分だけ表示する</title>
7</head>
8
9<body>
10    <img src="/img/sample.png">
11</body>
12
13</html>

uploadのコードは以下です。

Go
1func upload(c echo.Context) error {
2	// Read form fields
3	name := c.FormValue("name")
4	discription := c.FormValue("discription")
5
6	//------------
7	// Read files
8	//------------
9
10	// Multipart form
11	form, err := c.MultipartForm()
12	if err != nil {
13		return err
14	}
15	files := form.File["files"]
16
17	for _, file := range files {
18		// Source
19		src, err := file.Open()
20		if err != nil {
21			return err
22		}
23		defer src.Close()
24
25		// Destination
26		dst, err := os.Create("img/" + file.Filename)
27		if err != nil {
28			return err
29		}
30		defer dst.Close()
31
32		// Copy
33		if _, err = io.Copy(dst, src); err != nil {
34			return err
35		}
36	}
37
38	return c.HTML(http.StatusOK, fmt.Sprintf("<p>Uploaded successfully %d files with fields name=%s and discription=%s.</p>", len(files), name, discription))
39}

補足情報（FW/ツールのバージョンなど）

Windows10,VScode,Chrome

フレームワークはechoを使っています。

初心者のため至らぬところがありましたらどうぞよろしくお願いいたします。

nobonobo

2021/08/20 11:49

upload処理にどのようなことを行なっているのかを明記してください。その内容次第で表示方法は変わってきます。

Testament

2021/08/22 02:19

ありがとうございます、追加いたしました。

行動規範の内容に同意します

回答1件

ベストアンサー

仮に「img/」配下に「sample.png」という画像ファイルがあるとして、
それを表示するページを提供するときにどのようにshow.htmlがどうなっていれば表示できるか考えてみてください。まずはそれを追記してみてください。

次にその際のファイル名を「img/」をReadDirした結果に置き換えるだけなんですが、それはshow.htmlの内容が動的に変化するということになります。
動的なHTMLコンテンツを返すのにはどういう仕組みを使うのか考えてみてください。

追記その1

そのshow.html例で表示されるようにするために、必要なハンドラが以下になります。
参考： https://echo.labstack.com/guide/static-files/

e.Static("/img", "img")

これで/showの表示に「/img/sample.png」の画像表示はできましたでしょうか？
その後、show.htmlをテンプレートを使って以下のようなHTMLが出力されるように書けば良いわけです。

html
1<img src="/img/ファイル名">
2<img src="/img/ファイル名">
3<img src="/img/ファイル名">
4<img src="/img/ファイル名">
5...

追記その2

できれば上記の回答の段階を踏んだ方が自己解決力が向上するのですが、
だいぶ放置されているので回答例をあげておきます。

echoインスタンスのRendererにRendererインターフェースを満たすものをあらかじめ入れておきます。
(echo.Context).Render(...)にてRenderer.Render(...)を呼んだ結果を受け取れます。
Renderにはテンプレート名と任意のオブジェクトが渡せます。
テンプレートでは「{{.}}」にて上記の任意のオブジェクトを参照することができます。
この場合、filesを渡したのでos.FileInfoのスライスが参照できます。
「{{range $v := .}}」にてfilesを1要素づつ取り出して「{{end}}」までの内容を繰り返します。
「{{$v.Name}}」という記述は(os.FileInfo).Name()にアクセスすることになります。

go
1import (
2	"github.com/labstack/echo/v4"
3)
4
5type Template struct {
6	templates *template.Template
7}
8
9func (t *Template) Render(w io.Writer, name string, data interface{}, c echo.Context) error {
10	log.Println(t.templates, name, data)
11	return t.templates.ExecuteTemplate(w, name, data)
12}
13
14func show(c echo.Context) error {
15	files, _ := ioutil.ReadDir("img")
16	return c.Render(http.StatusOK, "show.html", files)
17}

go
1e := echo.New()
2e.Renderer = &Template{
3    templates: template.Must(template.ParseGlob("templates/*.html")),
4}

show.html

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8" />
5    <title>画像をある分だけ表示する</title>
6  </head>
7
8  <body>
9    {{range $v := .}}
10    <div>
11      <label>{{$v.Name}}</label>
12      <div>
13        <img src="/img/{{$v.Name}}" width="20%" />
14      </div>
15    </div>
16    {{end}}
17  </body>
18</html>