I have a template file, that when I display it using file:// protocol the background image (defined through CSS) displays fine. When I bring up the template using a minimal go webserver, the background image does not display, but everything else is fine. This was the minimal webserver:
package main
import (
“fmt”
“html/template”
“net/http”)
var tpl *template.Template
func init() {
tpl = template.Must(template.ParseGlob("./templates/testtemplate.html"))
}
func main() {
http.HandleFunc("/", index)
http.ListenAndServe(":8080", nil)
fmt.Println(“working”)
}
func index(w http.ResponseWriter, r *http.Request) {
tpl.ExecuteTemplate(w, “testtemplate.html”, nil)
}
package main
import (
"html/template"
"log"
"net/http"
)
var tpl *template.Template
func index(w http.ResponseWriter, r *http.Request) {
tpl.ExecuteTemplate(w, "testtemplate.html", nil)
}
func init() {
tpl = template.Must(template.ParseGlob("./templates/testtemplate.html"))
}
func main() {
mux := http.NewServeMux()
mux.HandleFunc("/", index)
// Create a file server which serves static files out of the "./images" directory.
fileServer := http.FileServer(http.Dir("./images"))
// Use the mux.Handle() function to register the file server as the
// handler for all URL paths that start with "/images/". For matching
// paths, we strip the "/image" prefix before the request reaches the file
// server.
mux.Handle("/images/", http.StripPrefix("/images", fileServer))
log.Println("Starting server on :8080")
err := http.ListenAndServe(":8080", mux)
log.Fatal(err)
}
Here’s a modified html template
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<!-- Link to the CSS stylesheet and favicon -->
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<style>
body { background-image: url("./images/tab.jpg"); background-repeat: no-repeat
}
h1.head {color:blue}
</style>
</head>
<body>
<header>
<h1><a href="/">Test</a></h1>
</header>
<nav>
<a href="/">Home</a>
<a href="/">Test</a>
</nav>
<section>
Body
</section>
</body>
</html>
Thanks, John, but now the server doesn’t find the template! It works with
the file// protocol, but I get a blank screen with the web server. Tried
all sorts of combinations of …/image, ./image, etc. but in no way would it
find the template. My file structure is
go
src
image <-- my .jpg is here.
templates <—testtemplate.html is here
So I changed your server code as follows:
func main() {
mux := http.NewServeMux()
mux.HandleFunc("/", index)
// Create a file server which serves static files out of the "./image"
directory.
fileServer := http.FileServer(http.Dir("../image"))
// Use the mux.Handle() function to register the file server as the
// handler for all URL paths that start with "/image/". For matching
// paths, we strip the "/image" prefix before the request reaches the
The testtemplate has the following in its background-image property:
body { background-image: url("…/image/grida5.jpg");
background-repeat: no-repeat
… which, as I say, displays everything including the background image
using the file// protocol. Can’t understand why …/image works, given my
file structure.
Unfortunately I still have only a rather vague idea of what’s going on!
when I run it I have the project setup as follows:
So, under your “src” dir create a directory named “test”.
then create both “images” and “templates” directories. main.go resides in the root of test, your image file goes into the images dir and the testtemplate.html into the templates dir.
from the root of the test dir you should have the following …
now run the following
go run main.go
The result I get is (using my own image file)
I highly recommend that you read the the following link, it should help explain how to do exactly what you want.
