Can't get a background image to display using go webserver


(Geoff Fridd) #1

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)
}

And this is the template:

<!-- 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("../image/grida5.gif"); background-repeat: no-repeat
	}
	h1.head {color:blue}
</style>

heading

Any idea why the webserver version of the html does not display the background image?


(Geoff Fridd) #2

My submission missed some of the HTML code… this is the full testtemplate:

<!-- 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("../image/grida5.gif"); background-repeat: no-repeat
	}
	h1.head {color:blue}
</style>

heading


(John Zanchetta) #3

I think that this Stack OverFlow item may help…

Cheers.


(John Zanchetta) #4

Here’s a working example…

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>

Hope this helps,
Cheers


(Geoff Fridd) #5

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

file
// server.
mux.Handle("/image/", http.StripPrefix("/image", fileServer))

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!

Geoff.


(John Zanchetta) #6

Might be your dir structure…

when I run it I have the project setup as follows:

image

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 …

image

now run the following

go run main.go

image

The result I get is (using my own image file)

image

I highly recommend that you read the the following link, it should help explain how to do exactly what you want.

http://www.alexedwards.net/blog/serving-static-sites-with-go

I’m signing off now, going on vacation so wont be “online” for three weeks.

Regards,
John


(John Zanchetta) #7

PS: If you have the money, Alexs’ book is excellent.


(Geoff Fridd) #8

Thanks for the help! I’ll try all this!
Have a great holiday!
Geoff.


(Evin Lewis) #9

The webserver is not supporting the file extension of the image. You need to change it. For more information go to https://errorcode0x.com/error-code-0x80070002/