前言

为什么要配置物理地址映射：因为前端的 <img :src="">或者 :style="background-img(url)"这些，如果要给这些标签动态赋值，从后端传来的路径必须是 url 形式，也就是说带冒号的动态src或者url不支持绝对路径的物理地址。所以要配置物理地址映射把图片的的物理地址映射为 url 地址传给前端。比如 D:/aa.png 前端 :src 无法识别，映射为 http://localhost/aa.png 就可以识别了。

为什么要配置静态资源代理：理由和上面一样，只是这个配置是项目部署到服务器上必须要添加的。也就是说项目在本地跑，上传和访问本地的图片，只需要配置Springboot的物理地址映射就可以了。

本篇文章没有介绍如何从前端上传图片并使用后端处理后讲 base64 转化为 url 存入数据库，我的另一篇有详细讲。传送门：Vue+Springboot上传图片将 Base64 码转换为图片保存在指定文件夹

一、Nginx 静态资源代理配置

先放这个，因为简单，下面配置了两个目录的代理，也就是

http://你的IP:端口号/user_head/aa.png可以访问到 /www/wwwroot/xuyijie.icu/upload_file/user_head/ 里面的aa.png

http://你的IP:端口号/blog_img/aa.png可以访问到 /www/wwwroot/xuyijie.icu/upload_file/blog_img/ 里面的aa.png

注意！如果你的服务器配置了类似下面的接口反向代理，你的访问 url 要加上 api 哦，也就是下面这样

http://你的IP:端口号/api/user_head/aa.png

location /api/ {proxy_pass http://127.0.0.1:8082/;
}

 # 下面两个location的意思是访问 http://你的IP:端口号/user_head/aa.png 就可以访问到在 /www/wwwroot/xuyijie.icu/upload_file/user_head/ 目录下的aa图片了#然后你就可以把http://你的IP:端口号/user_head/aa.png写到你的前端的 scr 里面就可以访问到了location /user_head/ {root /www/wwwroot/xuyijie.icu/upload_file/;}location /blog_img/ {root /www/wwwroot/xuyijie.icu/upload_file/;}

二、Springboot 物理地址映射配置

新建 config 包，在里面新建 WebConfig 类

代码如下，解析都在注释里

package pers.xuyijie.communityinteractionsystem.config;import org.springframework.beans.factory.annotation.Value;
import org.springframework.boot.SpringBootConfiguration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@SpringBootConfiguration
public class WebConfigurer implements WebMvcConfigurer {//映射到本地路径的代码意思是// 在F:/uploadFiles/user_head/目录下如果有一张aa.png的图片，那么// 访问：http://localhost:8081/user_head/aa.png就可以访问到它// 静态html 中这样写 <img src="http://localhost:8081/user_head/aa.png">// 动态html 中这样写 <img :src="imgUrl"> 把值赋给imgUrl就行，(this.imgUrl="http://localhost:8081/user_head/aa.png")@Overridepublic void addResourceHandlers(ResourceHandlerRegistry registry) {//映射到本地路径registry.addResourceHandler("/user_head/**").addResourceLocations("file:F:/uploadFiles/user_head/");registry.addResourceHandler("/blog_img/**").addResourceLocations("file:F:/uploadFiles/blog_img/");//映射到服务器的保存路径也可以(和上面的本地路径只能二选一，两个路径不能同时生效）//不推荐用代码映射服务器地址，因为我们已经用 Nginx 来代理服务器地址了)registry.addResourceHandler("/user_head/**").addResourceLocations("file:/www/wwwroot/xuyijie.icu/upload_file/user_head/");registry.addResourceHandler("/blog_img/**").addResourceLocations("file:/www/wwwroot/xuyijie.icu/upload_file/blog_img/")}
}

其实“addResourceLocations”里的路径指图片的真是存储路径，和数据库里存储的图片物理路径的字段的值无关
“数据库”里的路径瞎写都可以，只要对应图片的地址就可以，比如图片存在服务器的/www/wwwroot/xuyijie.icu/upload_file/user_head/目录，
“addResourceLocations”里和数据库里都写F://，这样也可以访问到，addResourceLocations是解析路径前端的:src路径，使图片的物理路径转换为url

总结

这是一个总结

哦对了，如果前后端不会打包部署到服务器，我的另外一篇文章有详细讲解，

传送门：记Linux使用宝塔部署Vue+Springboot前后端分离项目

Springboot物理地址映射和Nginx静态资源代理实现前端上传并访问服务器图片相关推荐

解决nginx静态资源无法预览只能下载的问题
解决nginx静态资源无法预览只能下载的问题场景介绍项目需求:用户登录web系统之后,如果有系统新消息产生,需用提示音告知用户,并且用户可以上传自己的个性化提示声音. 解决方案:用nginx静态代 ...
Springboot 页面访问不到静态资源Failed to load resource: the server responded with a status of 404 ()
Springboot 页面访问不到静态资源问题:在HTML文件中引入图片,但是浏览器访问不到图片. index.html: <!DOCTYPE html> <html xmlns: ...
nginx静态资源反向代理
nginx静态资源反向代理 server { listen 80; server_name music.didi365.com; index index.php index.html index.ht ...
springboot自定义静态资源代理WebMvcConfigurerAdapter详解和过期后的替代方案WebMvcConfigurer
最常用的跨域和静态资源代理 import org.springframework.context.annotation.Configuration; import org.springframewor ...
nginx静态资源的服务器配置方法
Nginx本身也是一个静态资源的服务器,当只有静态资源的时候,就可以使用Nginx来做服务器,同时现在也很流行动静分离,就可以通过Nginx来实现,这篇文章主要介绍了nginx静态资源的服务器配置方法 ...
Nginx静态资源部署
目录 Nginx静态资源概述 Nginx静态资源的配置指令 listen指令 server_name指令 location指令设置请求资源的目录root / alias index指令 error_ ...
Nginx静态资源优化、压缩、缓存
这一篇记录一下Nginx压缩缓存相关的指令,各位看到此博客的小伙伴,如有不对的地方请及时通过私信我或者评论此博客的方式指出,以免误人子弟.多谢! 目录优化 sendﬁle tcp_nopush tc ...
Nginx 静态资源缓存配置
示例 # Media: images, icons, video, audio, HTC location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|m ...
Nginx静态资源优化配置之tcp_nopush和tcp_nodelay
(2)tcp_nopush:该指令必须在sendfile打开的状态下才会生效,主要是用来提升网络包的传输'效率' 语法 tcp_nopush on|off; 默认值 tcp_nopush oﬀ; 位置 ...
请求nginx静态资源报403
[README] 请求nginx静态资源报403: [1]原因静态资源防止在某个家目录下,如 /root 目录下 [2] 解决方法1 nginx.conf 文件没有指定用户 # user nobod ...

Springboot物理地址映射和Nginx静态资源代理实现前端上传并访问服务器图片

Springboot物理地址映射和Nginx静态资源代理实现前端上传并访问服务器图片

前言

一、Nginx 静态资源代理配置

二、Springboot 物理地址映射配置

总结

Springboot物理地址映射和Nginx静态资源代理实现前端上传并访问服务器图片相关推荐

最新文章

热门文章