Golang中Gin框架无法通过相对路径引用图片的解决方案

Golang中Gin框架无法通过相对路径引用图片的解决方案 我正在尝试使用Gin Web框架将静态图片加载到HTML模板中。但是，当我尝试访问图片时，找不到它，并且指向该图片的相对文件路径都返回404错误。以下是终端输出。

[GIN] 2023/06/21 - 19:29:44 |←[97;42m 200 ←[0m|         5.5ms |             ::1 |←[97;44m GET     ←[0m "/issues"
[GIN] 2023/06/21 - 19:29:44 |←[90;43m 404 ←[0m|       152.7µs |             ::1 |←[97;44m GET     ←[0m "/storage\\covers\\Album1\\Album1-000.jpg"

以下是使用SQL数据库中的数据填充模板的函数

func GetIssues(c *gin.Context) {
    issues, err := GetIssuesFromDB()
    if err != nil {
        c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
        return
    }

   

    // Load the HTML template file
    tmpl, err := template.ParseFiles("frontend/issues.html")
    if err != nil {
        c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
        return
    }

    // Execute the template with the issues data
    err = tmpl.Execute(c.Writer, issues)
    if err != nil {
        c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
        return
    }
}

是什么原因导致Gin中的相对路径失效？


更多关于Golang中Gin框架无法通过相对路径引用图片的解决方案的实战教程也可以访问 https://www.itying.com/category-94-b0.html

10 回复

尝试将相对路径替换为 /storage/covers/Album1/Album1-000.jpg

更多关于Golang中Gin框架无法通过相对路径引用图片的解决方案的实战系列教程也可以访问 https://www.itying.com/category-94-b0.html


路径是否区分大小写？

你提供了静态内容服务吗？

示例：

func main() {
    fmt.Println("hello world")
}

我认为你的日志被转义了。 尝试只替换一个反斜杠（不确定）或者使用以下代码。变量 issues 是什么类型？

    for i := range issues {
        issues[i].CoverImage = strings.ReplaceAll(issues[i].CoverImage, `\`, `/`)
    }

同时，在你的浏览器中检查图片的URL： http://localhost:8080/storage/covers/Album1/Album1-000.jpg

我进行了一个测试，并且它是有效的。 请检查文件的路径。

测试：

GitHub - saya-ML/gin-static

GitHub - saya-ML/gin-static

通过创建GitHub账户来为saya-ML/gin-static的开发做贡献。

我已将正在使用的代码仓库公开。我不太清楚为什么它无法正常工作。

GitHub

GitHub - Nucl3arSn3k/comicmediaserver: 一个类似于Ubooquity的媒体服务器…

一个类似于Ubooquity、用于托管漫画书的媒体服务器。

我执行了这段代码，文件路径似乎已修复

[GIN] 2023/06/21 - 19:29:44 |←[97;42m 200 ←[0m|         5.5ms |             ::1 |←[97;44m GET     ←[0m "/issues"
[GIN] 2023/06/21 - 19:29:44 |←[90;43m 404 ←[0m|       152.7µs |             ::1 |←[97;44m GET     ←[0m "/storage/covers/Album1/Album1-000.jpg"

我仍然收到了该URL的404错误，直接检查URL也没有效果。

以下是我的主文件，它负责处理静态内容。我认为它应该能够提供静态内容服务。

import (
	d "mediaserver/database"

	"fmt"
	"os"

	"github.com/gin-contrib/static"
	"github.com/gin-gonic/gin"
)

func main() {
	d.TestFunc() // 调用数据库包中的测试函数
	webrender()

}

func webrender() {
	cwd, err := os.Getwd()
	r := gin.Default()
	fmt.Println(cwd)
	if err != nil {
		fmt.Println("Error:", err)
		return
	}
	r.Use(static.Serve("/", static.LocalFile("storage", true)))
	r.GET("/issues", d.GetIssues)
	r.Run(":8888") // 监听并在 0.0.0.0:8888 上提供服务
}

Nucl3arSn3k:

什么原因可能导致 Gin 中的相对路径失效？

你可以使用 gin.Static() 函数来指定提供静态文件的正确路径。

func main() {
    r := gin.Default()

    // 指定静态文件目录
    r.Static("/static", "./frontend/static")

    // ...

    // 运行服务器
    r.Run(":8080")
}

这样设置后，将从 "./frontend/static" 目录提供静态文件，并将其映射到 "/static" URL 路径。

你可以使用从指定的静态目录开始的相对路径来引用你的图片。例如，如果你有一个名为 "image.jpg" 的图片文件位于 "./frontend/static/images" 目录中，

<img src="/static/images/image.jpg" alt="Image">

通过此设置，Gin 应该能够正确找到并提供该图片。

我尝试添加了一个 replaceBackslashes 参数，但这没有起作用，我在 Gin 终端中看到了相同的路径。

[GIN] 2023/06/21 - 19:29:44 |←[97;42m 200 ←[0m|         5.5ms |             ::1 |←[97;44m GET     ←[0m "/issues"
[GIN] 2023/06/21 - 19:29:44 |←[90;43m 404 ←[0m|       152.7µs |             ::1 |←[97;44m GET     ←[0m "/storage\\covers\\Album1\\Album1-000.jpg"

func GetIssues(c *gin.Context) {
    issues, err := GetIssuesFromDB()
    if err != nil {
        c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
        return
    }

    // Replace backslashes with forward slashes in image file paths
    for _, issue := range issues {
        issue.CoverImage = strings.ReplaceAll(issue.CoverImage, `\\`, `/`)

    }

    // Load the HTML template file
    tmpl, err := template.ParseFiles("frontend/issues.html")
    if err != nil {
        c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
        return
    }

    // Execute the template with the issues data
    err = tmpl.Execute(c.Writer, issues)
    if err != nil {
        c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
        return
    }
}

在Gin框架中，相对路径无法正常访问静态文件通常是因为没有正确配置静态文件服务。从你的日志可以看到，浏览器尝试访问 /storage\covers\Album1\Album1-000.jpg 路径，但返回了404错误。这里有路径分隔符的问题（Windows的反斜杠），但主要问题是没有设置静态文件路由。

以下是解决方案：

package main

import (
    "github.com/gin-gonic/gin"
    "html/template"
    "net/http"
)

func main() {
    r := gin.Default()
    
    // 1. 设置静态文件服务 - 这是关键步骤
    // 将本地目录映射到URL路径
    r.Static("/storage", "./storage")
    
    // 或者使用绝对路径
    // r.Static("/storage", "C:/your/project/path/storage")
    
    // 2. 设置HTML模板
    r.LoadHTMLGlob("frontend/*.html")
    
    // 3. 定义路由
    r.GET("/issues", GetIssues)
    
    r.Run(":8080")
}

func GetIssues(c *gin.Context) {
    issues, err := GetIssuesFromDB()
    if err != nil {
        c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
        return
    }
    
    // 使用Gin的HTML渲染
    c.HTML(http.StatusOK, "issues.html", gin.H{
        "issues": issues,
    })
}

在HTML模板中，使用正确的URL路径引用图片：

<!-- issues.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Issues</title>
</head>
<body>
    {{range .issues}}
    <div class="issue">
        <!-- 使用/storage开头的绝对路径 -->
        <img src="/storage/covers/Album1/Album1-000.jpg" alt="Album Cover">
        <!-- 或者使用相对路径 -->
        <img src="storage/covers/Album1/Album1-000.jpg" alt="Album Cover">
    </div>
    {{end}}
</body>
</html>

如果你的目录结构是这样的：

project/
├── main.go
├── storage/
│   └── covers/
│       └── Album1/
│           └── Album1-000.jpg
└── frontend/
    └── issues.html

确保在代码中正确设置了静态文件路由。r.Static("/storage", "./storage") 这行代码将URL路径 /storage 映射到本地目录 ./storage。

如果问题仍然存在，可以添加中间件来调试：

func main() {
    r := gin.Default()
    
    // 调试中间件，打印所有请求
    r.Use(func(c *gin.Context) {
        fmt.Printf("Request URL: %s\n", c.Request.URL.Path)
        c.Next()
    })
    
    r.Static("/storage", "./storage")
    r.LoadHTMLGlob("frontend/*.html")
    r.GET("/issues", GetIssues)
    
    r.Run(":8080")
}

检查终端输出，确认请求的URL路径是否正确匹配静态文件路由。

回到顶部