Gin显示项目本地图片给前端

需求与背景

最近开发项目中遇到了一个问题，就是后端的一张图片，需要传递给前端，前端拿到后展示给用户

解决过程

最初想的是，查找gin框架有关图片上传的内容，后面才反应过来，图片上传是把不在项目中的图片给上传到项目中，而我们的需求是，把项目本地的图片展示给前端。这是两个不同的问题，图片文件上传在先，图片展示给前端在后。 我们的需求是在图片已经上传的基础上完成的，因为图片已经在项目中了。

方式一：

 

func main() {
	r := gin.Default()
	r.GET("upload", func(c *gin.Context) {
		c.File("test.png")
	})
	r.Run(":8088") // 监听并在 0.0.0.0:8080 上启动服务
}

然后访问localhost:8088/upload，有时候结果直接把图片给下载下来了，我们想要的只是显示出来，并不需要下载。有时候居然可以正常显示，不清楚咋回事。

方式二：

package main

import (
	"github.com/gin-gonic/gin"
	"io/ioutil"
)

func main() {
	r := gin.Default()
	r.GET("getImage", func(c *gin.Context) {
		getImage(c)
	})
	r.Run(":8088") // 监听并在 0.0.0.0:8088 上启动服务
}

func getImage(c *gin.Context){ //显示图片的方法
	imageName := c.Query("imageName") //截取get请求参数，也就是图片的路径，可是使用绝对路径，也可使用相对路径
	file, _ := ioutil.ReadFile(imageName) //把要显示的图片读取到变量中
	c.Writer.WriteString(string(file)) //关键一步，写给前端
}

我们访问localhost:8088/getImage?imageName=./test.png，然后也是可以成功访问的。

我们现在是在本地调试，当项目在服务端跑起来后，前端是可以直接通过 服务器地址:8088/getImage?imageName=./test.png 来拿到图片的，从而展示给用户。