Golang Web应用中img标签无法正常显示的问题排查

Golang Web应用中img标签无法正常显示的问题排查 我是一名经验丰富的开发者，但主要编写桌面应用程序。我正在使用Golang编写我的第一个Web服务器，目前运行良好。我在本地运行它，可以从服务器上的浏览器或WiFi网络中的任何其他计算机调用它。我有三个请求处理器，其中一个名为primesRequestHandler()，用于处理以“/primes/”开头的请求。

我想学习如何引入图像，因此添加了这行代码：

<img alt="Rick" width="100" height="80">

Rick.jpg文件与main.go文件位于同一目录中。

文件加载失败，并且我的一个处理器被调用。

因此我记录了传入的请求： primesRequestHandler r.URL.Path: /primes/Rick.jpg

我原本期望浏览器会使用类似以下方式从服务器检索文件： http://192.168.8.7:8080/Rick.jpg，但我想事情并非如此运作。


更多关于Golang Web应用中img标签无法正常显示的问题排查的实战教程也可以访问 https://www.itying.com/category-94-b0.html

7 回复

哇，这个也不行。你得相信我，src 设置确实在里面。

更多关于Golang Web应用中img标签无法正常显示的问题排查的实战系列教程也可以访问 https://www.itying.com/category-94-b0.html


Rick

我来试试。我想肯定有办法展示代码。

我忘记提到我正在使用一个模板。我检查了模板正在检查的内容，以下是它在那里的显示方式： Rick 看起来没问题。

奇怪，不知为何，当我将HTML粘贴到我的消息中时，它移除了src部分。也许我引用一下： Rick 无论如何，你的建议非常有效。非常感谢。

rschluet: 哇，那个方法也不行。

如果你直接粘贴代码，它会显示为： Rick

如果你选中你的代码并使用‘</>’按钮，它会显示为代码：

<img src="/img/rick.jpg" alt="Rick">

（或者使用反引号 `）

rschluet:

我想学习如何引入图片，所以我添加了这行代码：

这行代码不会生效，因为 Go 不知道去哪里找图片： <img alt="Rick" width="100" height="80">

你必须添加图片的路径 <img src="/img/rick.jpg" alt="Rick">

并且在 main.go 文件中添加这行代码：

func init() {
	tpl = template.Must(template.ParseGlob("public/tmpl/*.html"))
	http.Handle("/img/", http.StripPrefix("/img/", http.FileServer(http.Dir("./public/img"))))
}

假设你有这样的文件夹结构：Install Go on Your Computer

在Golang Web应用中，img标签的src属性需要指向一个有效的HTTP端点。你遇到的问题是浏览器正在向/primes/Rick.jpg发送请求，而你的primesRequestHandler正在处理它，而不是一个专门提供静态文件的处理器。

以下是解决方案：

  1. 创建静态文件处理器： 使用http.FileServer来提供静态文件。将以下代码添加到你的main函数中：
// 提供静态文件
fs := http.FileServer(http.Dir("."))
http.Handle("/", fs)
  1. 调整路由顺序： 确保静态文件处理器在特定路由之前注册，或者使用不同的路径前缀：
// 提供静态文件（例如，将静态文件放在"static"目录中）
fs := http.FileServer(http.Dir("static"))
http.Handle("/static/", http.StripPrefix("/static/", fs))

// 特定路由
http.HandleFunc("/primes/", primesRequestHandler)
  1. 更新HTML中的img标签： 根据你的静态文件路径调整src属性：
<!-- 如果使用根目录 -->
<img src="/Rick.jpg" alt="Rick" width="100" height="80">

<!-- 如果使用静态目录 -->
<img src="/static/Rick.jpg" alt="Rick" width="100" height="80">

完整示例：

package main

import (
    "net/http"
)

func primesRequestHandler(w http.ResponseWriter, r *http.Request) {
    // 你的素数处理逻辑
}

func main() {
    // 提供静态文件（当前目录）
    fs := http.FileServer(http.Dir("."))
    http.Handle("/", fs)

    // 特定路由
    http.HandleFunc("/primes/", primesRequestHandler)

    http.ListenAndServe(":8080", nil)
}

这样配置后，浏览器请求/Rick.jpg将由静态文件处理器处理，而/primes/路径的请求仍由你的primesRequestHandler处理。

回到顶部