Gorilla/mux: Image not displaying

Question

I am new in Golang. I need display an image. I tried using Gorilla/mux. But I am still getting Error:404. I thing may be the place where I used mux code is not correct.

Main func

    package main
    import (
        "net/http"
        "mytestsite/handlers"
         "log"
         "github.com/gorilla/mux"
     )


    func main() {

    r := mux.NewRouter()
    r.HandleFunc("/register", handlers.RegisterHandler)
    r.HandleFunc("/sucess", handlers.Sucess)
    r.HandleFunc("/login", handlers.Login)
    r.HandleFunc("/list", handlers.ViewList)
    r.HandleFunc("/logout", handlers.Logout)
    r.HandleFunc("/edit", handlers.Edit)
    r.HandleFunc("/EditnList", handlers.EditnList)
    r.HandleFunc("/notvalid", handlers.NotValid)
    r.HandleFunc("/delete", handlers.Delete)
    r.HandleFunc("/listchoose", handlers.ListChoose)
    r.HandleFunc("/email", handlers.SendEmail)
    images := http.StripPrefix("/images/", http.FileServer(http.Dir("./frontend/images/")))
    r.PathPrefix("/images/").Handler(images)

    if err := http.ListenAndServe(":8181", r); err != nil {
        log.Fatal("http.ListenAndServe: ", err)
    }        
}

Func which pass data to html

func ViewList(w http.ResponseWriter, r *http.Request) {
    viewModel:=viewmodels.RegisterViewModel{}
    user:=models.User{}
    dbResults := user.ViewDB() 

    //Cookies below
    cookieCheck := getCookie(r)

    if (cookieCheck != ""){
        err:=GetTemplate("list").Execute(w,dbResults)
        if err!=nil{
            panic(err)
        }
    } else { 
        viewModel.ErrorMessage="Please Enter Email Id and Password.."
        err:=GetTemplate("login").Execute(w,viewModel)
        if err!=nil{
            panic(err)
        }
    }
}

Usage in html file

<td><img src="{{.Photo}}" alt="{{.Photo}}" style="width:50px;height:50px;"/></td>

Value of {{.Photo}} is stored to Db by following code:

ctime := time.Now()
uploadedfile := "frontend/images"+ctime.Format("20060102150405")+".jpg"
out, err := os.Create(uploadedfile)

SO value of {{.Photo}} will be like as follows

frontend/images/20160202171411.jpg

the image tag itself is 404'd? or the whole page? You also don't show where where Photo comes from. I assume it's an attribute of your viewmodel? Is it a url? what's the value of .Photo? — David Budworth
@David Budworth Page is loading. Image shows as broken image link. The image link is coming from the DB. When I take tdate image li — Arjun Ajith
(Sorry accidentally tapped on post button..) when I take take inspect element image link is present there. But when I try to open the link it is giving me a 404. The link is stored in the DB at the time of image upload. I will add the code ASAP. — Arjun Ajith
and you are running you app from whatever the part dir of frontend is? — David Budworth
also, just noticed. you create a mux.NewRouter but never pass it to listen and serve. you are currently mixing gorilla and stdlib http muxes — David Budworth

David Budworth David Budworth · Accepted Answer · 2016-02-03T19:07:01

You are mixing two routers here.

First off, the http package has a package global default handler called: DefaultServeMux. This is an instance of http.ServeMux

When you call http.HandleFunc, DefaultServeMux is where that handler gets registered (source)

When you call http.ListenAndServe, the second parameter is what handler to use for HTTP requests that come in on your specified port.

If you pass nil as the handler (like you do in your code), you are telling the http server to use http.DefaultServeMux

Gorilla mux is an alternative to http.ServeMux. In general, you use one or the other.

In your case, you are registering your file server with a gorilla mux, but then telling http.ListenAndServe to use http.DefaultServeMux (by omitting the handler).

You can either register your file serve with the standard http library's default mux (via: http.Handle) or change your function mappings to register with your Gorilla mux (via: r.HandlerFunc).

If you choose to use Gorilla (more flexible solution, but is not really necessary given your example code), then pass that instead of nil to ListenAndServe.

Gorilla/mux: Image not displaying

1 Answers