小白求问前端图片的url本质

直接放在后端静态目录static里，前端直接在img的src里写一下不就行了…或者前端用base64展示图片也可以

如果图片在前端目录下，直接映射即可 如果图片在后端目录下，读取图片内容转成base64 string 返回 【 在 yu1183569689 的大作中提到: 】 : 请问，图片的url是一个get请求吗？需要在服务器端编写相关的api？ : 目前服务器上面包含一些图片，想要在前端展示出来，但是不知道后端如何写。如果是个get或者post的api，是返回整个图片的字节流还是什么呢？（使用flask+vue）

【 在 FatBird 的大作中提到: 】 : 直接放在后端静态目录static里，前端直接在img的src里写一下不就行了…或者前端用base64展示图片也可以 请问下，图片的url，可不可能并不是一个图片，而是后端的一个查询函数，这个函数会根据url的不同，动态地返回图片文件呢？这种要如何实现呢？

【 在 XiaoBiShou 的大作中提到: 】 : 如果图片在前端目录下，直接映射即可 : 如果图片在后端目录下，读取图片内容转成base64 string 返回 请问下，图片的url，可不可能并不是一个图片，而是后端的一个查询函数，这个函数会根据url的不同，动态地返回图片文件呢？这种要如何实现呢？

【 在 XiaoBiShou 的大作中提到: 】 : 如果图片在前端目录下，直接映射即可 : 如果图片在后端目录下，读取图片内容转成base64 string 返回 顺便再问下老哥，如果转换为base64字符串的话，是不是在img里面，要这样写？<img src="data:image/png;base64,base64编码的png图片数据">,也就是说，图片如果很大，这个编码后的数据会很长，我们还有一个打标的模块，需要保存图片的url，所以，最好是一个较短的url，而不是整个图片的base64编码。

【 在 yu1183569689 的大作中提到: 】 : 请问下，图片的url，可不可能并不是一个图片，而是后端的一个查询函数，这个函数会根据url的不同，动态地返回图片文件呢？这种要如何实现呢？ 那就在Vue里把这个地址定义成一个函数返回值呗，传参调用后端的查询函数，这个返回值就用“/static/imgs/demo.png”这类的，这个src属性也就可以显示对应的静态文件了

【 在 FatBird 的大作中提到: 】 : : 那就在Vue里把这个地址定义成一个函数返回值呗，传参调用后端的查询函数，这个返回值就用“/static/imgs/demo.png”这类的，这个src属性也就可以显示对应的静态文件了 如果返回值是路径的话，是不是还是得把图片放到对应的静态文件路径下呢？我们的图片是放在服务器其他文件夹的，而且是用户自己想放在哪放在哪的，还有的图片是放在HDFS上面的。所以，图片应该没法放在/static/imgs/demo.png。您说的方案的函数返回值，还是一个动态的路径。src=“/static/imgs/demo.png”,返回的是什么呢？我的那个url所对应的函数，也返回和这个一样的东西（比如说图片），是不是就行了呢？只不过，它的是通过路径获得图片，我是通过函数一系列操作获得图片。

https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element

实践中，因为图片算是比较大的资源文件，所以一般放到图床上，使用 CDN 加速，前端再通过外链的形式加载。一些图床服务也会提供在 url 后面加上参数，比如长宽格式，然后图床对原图片进行处理后返回给客户端。 至于楼主问的”图片的url本质“其实也都是一个后端 HTTP 服务，返回给前端的时候注明了文件类型，前端识别这个类型后去解析为图片