質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Go

Go(golang)は、Googleで開発されたオープンソースのプログラミング言語です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

3115閲覧

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

Testament

総合スコア1

Go

Go(golang)は、Googleで開発されたオープンソースのプログラミング言語です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2021/08/18 06:48

編集2021/08/23 11:36

前提・実現したいこと

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を使っています。

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nobonobo

2021/08/20 11:49

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

2021/08/22 02:19

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

回答1

0

ベストアンサー

仮に「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>

投稿2021/08/22 05:17

編集2021/08/26 08:59
nobonobo

総合スコア3367

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Testament

2021/08/27 15:37 編集

無事解決できました、ありがとうございます。実力、勉強不足でした…
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問