Golang Web服务器中背景图片无法显示的解决方法

Golang Web服务器中背景图片无法显示的解决方法 我有一个模板文件，当使用 file:// 协议打开时，背景图片（通过 CSS 定义）能正常显示。但当我使用一个极简的 Go 网络服务器加载该模板时，背景图片无法显示，其他一切正常。以下是最简服务器代码：

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

这是模板内容：

<!-- 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>

标题

有谁知道为什么通过网络服务器加载的 HTML 无法显示背景图片？


更多关于Golang Web服务器中背景图片无法显示的解决方法的实战教程也可以访问 https://www.itying.com/category-94-b0.html

9 回复

感谢您的帮助！我会尝试所有这些方法！ 祝您假期愉快！

更多关于Golang Web服务器中背景图片无法显示的解决方法的实战系列教程也可以访问 https://www.itying.com/category-94-b0.html


附注：如果你有预算，亚历克斯的书非常出色。

Web服务器不支持该图像文件的扩展名。您需要更改它。更多信息请访问 https://errorcode0x.com/error-code-0x80070002/

我认为这个Stack Overflow条目可能会有所帮助…

levtatarov

Go语言简单Web服务器：提供静态图片服务

标签： go

祝好。

我的提交遗漏了一些HTML代码…这是完整的测试模板：

<!-- 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>

标题

感谢约翰，但现在服务器找不到模板！使用文件协议时可以正常工作，但通过Web服务器访问时只显示空白屏幕。尝试了各种路径组合如…/image、./image等，但始终无法找到模板。我的文件结构如下： go src image <-- 我的.jpg文件在此 templates <—testtemplate.html在此

因此我将您的服务器代码修改如下：

func main() {
mux := http.NewServeMux()
mux.HandleFunc("/", index)

// 创建文件服务器，用于提供"./image"目录中的静态文件
fileServer := http.FileServer(http.Dir("../image"))

// 使用mux.Handle()函数将文件服务器注册为
// 所有以"/image/"开头的URL路径的处理器。对于匹配的
// 路径，在请求到达文件服务器之前会去除"/image"前缀
mux.Handle("/image/", http.StripPrefix("/image", fileServer))

测试模板的背景图像属性中包含： body { background-image: url("…/image/grida5.jpg"); background-repeat: no-repeat …正如我所说，使用文件协议时可以显示所有内容包括背景图像。考虑到我的文件结构，无法理解为什么…/image能正常工作。

遗憾的是，我对此仍然只有相当模糊的概念！

可能是你的目录结构问题…

当我运行它时，项目设置如下：

image

所以，在你的"src"目录下创建一个名为"test"的目录。 然后创建"images"和"templates"两个目录。 main.go位于test的根目录中，你的图片文件放在images目录中，testtemplate.html放在templates目录中。

从test目录的根目录开始，你应该有以下结构…

image

现在运行以下命令

go run main.go

image

我得到的结果是（使用我自己的图片文件）

image

我强烈建议你阅读以下链接，它应该能帮助你解释如何实现你想要的功能。

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

我现在要下线了，要去度假，所以三周内不会"在线"。

此致， John

这是一个可运行的示例…

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)

	// 创建一个文件服务器，用于提供"./images"目录中的静态文件

	fileServer := http.FileServer(http.Dir("./images"))

	// 使用mux.Handle()函数将文件服务器注册为所有以"/images/"开头的URL路径的处理程序
	// 对于匹配的路径，在请求到达文件服务器之前，我们会去除"/image"前缀
	mux.Handle("/images/", http.StripPrefix("/images", fileServer))

	log.Println("Starting server on :8080")
	err := http.ListenAndServe(":8080", mux)
	log.Fatal(err)
}

这是修改后的HTML模板

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Test</title>
        <!-- 链接到CSS样式表和网站图标 -->

        <!-- 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="/">首页</a>
    <a href="/">测试</a>
</nav>
<section>
    主体内容
</section>
</body>
</html>

希望这对您有帮助， 祝好

问题在于你的Go Web服务器没有提供静态文件服务。当使用file://协议时，浏览器直接从本地文件系统加载图片，但在Web服务器环境下，所有资源都需要通过HTTP路由来访问。

在你的代码中，只处理了模板的路由，但没有处理静态资源（如图片）的路由。你需要添加静态文件服务来处理CSS中引用的图片。

以下是修改后的服务器代码：

package main

import (
	"fmt"
	"html/template"
	"net/http"
)

var tpl *template.Template

func init() {
	tpl = template.Must(template.ParseGlob("./templates/*.html"))
}

func main() {
	// 添加静态文件服务
	fs := http.FileServer(http.Dir("./"))
	http.Handle("/static/", http.StripPrefix("/static/", fs))
	
	http.HandleFunc("/", index)
	http.ListenAndServe(":8080", nil)
	fmt.Println("working")
}

func index(w http.ResponseWriter, r *http.Request) {
	tpl.ExecuteTemplate(w, "testtemplate.html", nil)
}

同时需要修改模板中的图片路径：

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

假设你的目录结构如下：

project/
├── main.go
├── templates/
│   └── testtemplate.html
└── image/
    └── grida5.gif

关键点：

  1. http.FileServer创建了一个静态文件服务器
  2. http.StripPrefix("/static/", fs)移除了URL中的/static/前缀
  3. 图片路径改为/static/image/grida5.gif，这样浏览器会通过HTTP请求http://localhost:8080/static/image/grida5.gif

另一种替代方案是使用绝对路径，将静态文件放在项目的static目录中：

// 在main函数中添加
http.Handle("/static/", http.StripPrefix("/static/", http.FileServer(http.Dir("static"))))

然后调整目录结构，将图片移动到static/image/目录下，CSS中的路径保持不变。

回到顶部