Golang中如何使用<IMG src="...">在HTML页面显示图片

Golang中如何使用在HTML页面显示图片 我使用Go和HTML构建了一个非常简单的网站。

目录结构如下：

root |--html
     |--static---gambar

html文件夹包含我的HTML代码（sementara.html）。static文件夹包含gambar文件夹。而gambar文件夹中包含图片文件（gua.png）。

sementara.html

<html>
<head>
<title>Show photo-list</title>
</head>
<style>
  	a {
  		text-decoration: none;
  	}
  	
  	body {
  		font-family: Arial, Helvetica;
  		font-size: 12px;
	}
</style>
<body><center>
<h1>Photo-List</h1>
				<a href="imgsrcgua" style="text-decoration: none;"><img src="../static/gambar/gua.png" alt="I can not find the picture-file">Patrix Linus</a>
</center></body>
</html>

main.go

package main

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

	//"net/url"

	//"os"
	"strings"
)

func my_webLobby(w http.ResponseWriter, r *http.Request) {
	r.ParseForm()
	fmt.Println(r.Form)
	fmt.Println("path", r.URL.Path)
	fmt.Println("scheme", r.URL.Scheme)
	fmt.Println(r.Form["url_long"])
	for k, v := range r.Form {
		fmt.Println("key:", k)
		fmt.Println("val:", strings.Join(v, ""))
	}

	t, _ := template.ParseFiles("html/sementara.html")
	t.Execute(w, nil)
}

func tampilkanimgsrc(w http.ResponseWriter, r *http.Request) {
	http.Redirect(w, r, "/", 302)
}

func main() {
	http.HandleFunc("/", my_webLobby)
	http.HandleFunc("/imgsrcgua", tampilkanimgsrc)

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

但是我的sementara.html文件找不到gua.png（一张图片）文件。

我不明白为什么。请向我解释Go实际上是如何管理文件位置的。为什么我的HTML找不到图片文件（gua.png），而它本应该显示在<img src="" width="" height="">标签中。

恳请有人能好心为我解释一下这个问题。


更多关于Golang中如何使用<IMG src="...">在HTML页面显示图片的实战教程也可以访问 https://www.itying.com/category-94-b0.html

2 回复

对图片的请求将被路由到 my_webLobby，而其中没有加载文件的功能。 你可以添加类似以下的内容：

http.Handle("/static/", http.FileServer(http.Dir(".")))

更多关于Golang中如何使用<IMG src="...">在HTML页面显示图片的实战系列教程也可以访问 https://www.itying.com/category-94-b0.html


在Go中，HTML文件中的相对路径是相对于浏览器请求的URL，而不是相对于服务器文件系统。你的问题在于没有正确提供静态文件服务。

问题分析

  1. HTML中的路径：<img src="../static/gambar/gua.png"> 这个路径是浏览器尝试从当前URL的相对路径加载图片
  2. 缺少静态文件处理器：Go的http包默认不会提供静态文件服务，需要显式配置

解决方案

修改main.go，添加静态文件服务：

package main

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

func my_webLobby(w http.ResponseWriter, r *http.Request) {
	r.ParseForm()
	fmt.Println(r.Form)
	fmt.Println("path", r.URL.Path)
	fmt.Println("scheme", r.URL.Scheme)
	fmt.Println(r.Form["url_long"])
	for k, v := range r.Form {
		fmt.Println("key:", k)
		fmt.Println("val:", strings.Join(v, ""))
	}

	t, _ := template.ParseFiles("html/sementara.html")
	t.Execute(w, nil)
}

func tampilkanimgsrc(w http.ResponseWriter, r *http.Request) {
	http.Redirect(w, r, "/", 302)
}

func main() {
	// 提供静态文件服务
	fs := http.FileServer(http.Dir("static"))
	http.Handle("/static/", http.StripPrefix("/static/", fs))
	
	// 处理动态请求
	http.HandleFunc("/", my_webLobby)
	http.HandleFunc("/imgsrcgua", tampilkanimgsrc)

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

同时修改HTML中的图片路径：

<html>
<head>
<title>Show photo-list</title>
</head>
<style>
  	a {
  		text-decoration: none;
  	}
  	
  	body {
  		font-family: Arial, Helvetica;
  		font-size: 12px;
	}
</style>
<body><center>
<h1>Photo-List</h1>
				<a href="imgsrcgua" style="text-decoration: none;">
					<img src="/static/gambar/gua.png" alt="I can not find the picture-file">
					Patrix Linus
				</a>
</center></body>
</html>

工作原理

  1. http.FileServer(http.Dir("static")) 创建了一个处理静态文件的处理器
  2. http.Handle("/static/", http.StripPrefix("/static/", fs)) 将/static/路径映射到static目录
  3. 浏览器请求/static/gambar/gua.png时，Go会从static/gambar/gua.png提供文件
  4. HTML中使用绝对路径/static/gambar/gua.png确保路径正确

目录结构验证

确保你的目录结构如下：

root/
├── main.go
├── html/
│   └── sementara.html
└── static/
    └── gambar/
        └── gua.png

启动服务器后，图片可以通过http://localhost:9099/static/gambar/gua.png访问，HTML页面中的<img>标签也能正确加载图片。

回到顶部