Gin cannot find images that are referenced via a relative filepath

Getting Help
1

Hello. I’m attempting to load a static image onto a html template using the Gin web framework. However, when I attempt to access the image it is not found and the relative filepaths leading to the image all return a 404 error. Here is the terminal output.

[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"

Here is the function that populates the template with the data in the SQL database

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

What could be causing the relative paths to break in Gin?

2

Try to replace the relative path to
/storage/covers/Album1/Album1-000.jpg

3

I tried adding a replaceBackslashes paramater,but that didn’t work,and I got the same path in the Gin terminal.

[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
    }
}
4

I believe that your log is escaped.
Try replacing only one backslash (not sure) or with the following code. What type is the variable issues?

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

Also check in your browser the url of the image:
http://localhost:8080/storage/covers/Album1/Album1-000.jpg

5

I executed this code and the filepath seemed fixed

[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"

I still got a 404 for the URL and checking the URL directly didn’t work.

6

Is the path case sensitive?

Did you serve the static content?

Example:

7

Here is my main file that handles the static content. I think it should serve the static content.


import (
	d "mediaserver/database"

	"fmt"
	"os"

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

func main() {
	d.TestFunc() // Call the test function from the database package
	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") // listen and serve on 0.0.0.0:8888
}
8

I made a test and it is working.
Check the path of the files.

Test:

9

I made the code for the repo I’m working with public. I’m unclear as to why it’s not working.

10

You can specify the correct path for serving static files using the gin.Static() function.


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

    // Specify the static files directory
    r.Static("/static", "./frontend/static")

    // ...

    // Run the server
    r.Run(":8080")
}

serving static files from the "./frontend/static" directory and mapping it to the "/static" URL path.

you can reference your image using a relative path starting from the specified static directory. For example, if you have an image file named "image.jpg" located in the "./frontend/static/images" directory,

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

With this setup, Gin should be able to find and serve the image correctly.

11

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.