如何处理网页图片显示的正确文件路径？http.FileServer路径问题

你的问题出在两个核心点：

1. 静态路由未关联自定义多路复用器：你创建了自己的mux作为服务器的Handler，但静态文件路由/static/是注册到默认的http.DefaultServeMux而非自定义mux，导致该路由实际未被服务器生效。
2. 相对路径基准错误：当HTML文件位于/template/路径下时，浏览器解析相对路径static/images/img.jpg会以当前页面URL（如/template/index.html）为基准，实际请求/template/static/images/img.jpg，这个路径没有对应的路由处理，因此图片加载失败。

1. 修正服务器路由注册 #

将静态文件路由绑定到自定义的mux上，确保服务器能处理静态资源请求：

mux := http.NewServeMux()

mux.HandleFunc("/", homeHandler)
// 把静态路由注册到自定义mux
fs := http.FileServer(http.Dir(""))
mux.Handle("/static/", http.StripPrefix("/static", fs))

server := &http.Server{
    Addr:    "127.0.0.1:8080",
    Handler: mux,
}

log.Fatal(server.ListenAndServe())

2. 修改HTML图片路径为绝对路径 #

将图片的src改为以/开头的绝对路径，这样无论HTML处于哪个目录，浏览器都会从根目录发起静态资源请求：

<body>
    <img src="/static/images/img.jpg" alt="image" style="width:364.5px; height:191.625px;">
</body>

额外优化建议 #

为了避免暴露根目录下的非静态文件，建议将所有静态资源统一放到static目录（如./static/images/），再调整服务器代码：

// 指向static目录，而非根目录
fs := http.FileServer(http.Dir("static"))
// 注意StripPrefix的参数要和路由一致，保留末尾的/
mux.Handle("/static/", http.StripPrefix("/static/", fs))

此时图片路径依然是/static/images/img.jpg，对应实际文件路径./static/images/img.jpg，能更好地隔离和管理静态资源。

内容的提问来源于stack exchange，提问作者Ali K.