spring boot 直接通过url访问外部静态资源图片

最新推荐文章于 2022-04-11 15:54:06 发布

-清风明月-

最新推荐文章于 2022-04-11 15:54:06 发布

阅读量2k

点赞数 4

分类专栏： SpringBoot Java

本文链接：https://blog.csdn.net/weixin_38296425/article/details/109579742

版权

Java 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

SpringBoot

4 篇文章 0 订阅

订阅专栏

SpingBoot应用某些情况下需要外部的资源图片，例如要访问/home/app/img_test/images目录下图片，其实方法比较多，今天只介绍其中一种实现WebMvcConfigurer接口的addResourceHandlers方法。

SpingBoot应用HTTP监听端口8182

tomcat服务端口8080

1. 定义WebMvcConfiguration

@Configuration
public class WebMvcConfiguration implements WebMvcConfigurer {
    @Value("${img-path}")
    private String imgPath;

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/img/**")
                .addResourceLocations(imgPath);
    }


    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry
                .addMapping("/**")
                .allowedOrigins("*");//允许域名访问，如果*，代表所有域名
    }

}

2. 定义img-path参数

server.port=8182

img-path=file:/home/app/img_test/images/

注意：

img-path参数值的末尾一定要加路径分隔符，否则会找不到这个路径下的资源文件，比如

file:/home/app/img_test/images是错误的,需要设置成

file:/home/app/img_test/images/

3.定义图片目录

/home/app/img_test/images/abc
/home/app/img_test/images/ccb
/home/app/img_test/images/icbc

[root@myCloudServer images]# tree
.
|-- 10.jpg
|-- 11.jpg
|-- 12.jpg
|-- 1.jpg
|-- 2.jpg
|-- 3.jpg
|-- 4.jpg
|-- 5.jpg
|-- 6.jpg
|-- 7.jpg
|-- 8.jpg
|-- 9.jpg
|-- abc
|   |-- 10.jpg
|   |-- 11.jpg
|   |-- 12.jpg
|   |-- 13.jpg
|   |-- 14.jpg
|   |-- 15.jpg
|   |-- 1.jpg
|   |-- 2.jpg
|   |-- 3.jpg
|   |-- 4.jpg
|   |-- 5.jpg
|   |-- 6.jpg
|   |-- 7.jpg
|   |-- 8.jpg
|   `-- 9.jpg
|-- ccb
|   |-- 10.jpg
|   |-- 11.jpg
|   |-- 12.jpg
|   |-- 13.jpg
|   |-- 14.jpg
|   |-- 15.jpg
|   |-- 16.jpg
|   |-- 17.jpg
|   |-- 18.jpg
|   |-- 19.jpg
|   |-- 1.jpg
|   |-- 20.jpg
|   |-- 21.jpg
|   |-- 22.jpg
|   |-- 23.jpg
|   |-- 24.jpg
|   |-- 25.jpg
|   |-- 26.jpg
|   |-- 27.jpg
|   |-- 2.jpg
|   |-- 3.jpg
|   |-- 4.jpg
|   |-- 5.jpg
|   |-- 6.jpg
|   |-- 7.jpg
|   |-- 8.jpg
|   `-- 9.jpg
|-- hello.bmp
`-- icbc
    |-- 10.jpg
    |-- 11.jpg
    |-- 12.jpg
    |-- 13.jpg
    |-- 14.jpg
    |-- 1.jpg
    |-- 2.jpg
    |-- 3.jpg
    |-- 4.jpg
    |-- 5.jpg
    |-- 6.jpg
    |-- 7.jpg
    |-- 8.jpg
    |-- 9.jpg
    `-- hello.bmp

3 directories, 70 files

abc ccb icbc目录下是图片文件

4.定义测试页面文件img_list.html

<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta name="referrer" content="origin" />
		<meta http-equiv="Cache-Control" content="no-transform" />
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		
		<style>
			.img200
			{
				width: 200px;
				height: 100px;
				border: 1px solid blue;
			}
			
			.img200_silver
			{
				width: 200px;
				height: 100px;
				border: 1px solid Silver;
			}
			
			.img200_red
			{
				width: 200px;
				height: 100px;
				border: 1px solid Silver;
			}
		
		</style>
	</head>
	
	<body>
	
		
	    <p>XXX银行</p>
		<ul>			
			<li><img src="http://127.0.0.1:8182/img/1.jpg" class="img200"></li>
			<li><img src="http://127.0.0.1:8182/img/2.jpg" class="img200"></li>
			<li><img src="http://127.0.0.1:8182/img/3.jpg" class="img200"></li>
			<li><img src="http://127.0.0.1:8182/img/4.jpg" class="img200"></li>
			<li><img src="http://127.0.0.1:8182/img/5.jpg" class="img200"></li>
		</ul>	
	
	
	    <p>工商银行</p>
		<ul>			
			<li><img src="http://127.0.0.1:8182/img/icbc/1.jpg" class="img200"></li>
			<li><img src="http://127.0.0.1:8182/img/icbc/2.jpg" class="img200"></li>
			<li><img src="http://127.0.0.1:8182/img/icbc/3.jpg" class="img200"></li>
			<li><img src="http://127.0.0.1:8182/img/icbc/4.jpg" class="img200"></li>
			<li><img src="http://127.0.0.1:8182/img/icbc/5.jpg" class="img200"></li>
			<li><img src="http://127.0.0.1:8182/img/icbc/6.jpg" class="img200"></li>
			<li><img src="http://127.0.0.1:8182/img/icbc/7.jpg" class="img200"></li>
			<li><img src="http://127.0.0.1:8182/img/icbc/8.jpg" class="img200"></li>
			<li><img src="http://127.0.0.1:8182/img/icbc/9.jpg" class="img200"></li>
			<li><img src="http://127.0.0.1:8182/img/icbc/10.jpg" class="img200"></li>
			<li><img src="http://127.0.0.1:8182/img/icbc/11.jpg" class="img200"></li>
			<li><img src="http://127.0.0.1:8182/img/icbc/12.jpg" class="img200"></li>
			<li><img src="http://127.0.0.1:8182/img/icbc/13.jpg" class="img200"></li>
			<li><img src="http://127.0.0.1:8182/img/icbc/14.jpg" class="img200"></li>		
			<li><img src="http://127.0.0.1:8182/img/icbc/hello.bmp" class="img200"></li>					
		</ul>
		<hr>
		<p>农业银行</p>
		<ul>			
			<li><img src="http://127.0.0.1:8182/img/abc/1.jpg" class="img200_silver"></li>
			<li><img src="http://127.0.0.1:8182/img/abc/2.jpg" class="img200_silver"></li>
			<li><img src="http://127.0.0.1:8182/img/abc/3.jpg" class="img200_silver"></li>
			<li><img src="http://127.0.0.1:8182/img/abc/4.jpg" class="img200_silver"></li>
			<li><img src="http://127.0.0.1:8182/img/abc/5.jpg" class="img200_silver"></li>
			<li><img src="http://127.0.0.1:8182/img/abc/6.jpg" class="img200_silver"></li>
			<li><img src="http://127.0.0.1:8182/img/abc/7.jpg" class="img200_silver"></li>
			<li><img src="http://127.0.0.1:8182/img/abc/8.jpg" class="img200_silver"></li>
			<li><img src="http://127.0.0.1:8182/img/abc/9.jpg" class="img200_silver"></li>
			<li><img src="http://127.0.0.1:8182/img/abc/10.jpg" class="img200_silver"></li>
			<li><img src="http://127.0.0.1:8182/img/abc/11.jpg" class="img200_silver"></li>
			<li><img src="http://127.0.0.1:8182/img/abc/12.jpg" class="img200_silver"></li>
			<li><img src="http://127.0.0.1:8182/img/abc/13.jpg" class="img200_silver"></li>
			<li><img src="http://127.0.0.1:8182/img/abc/14.jpg" class="img200_silver"></li>
			<li><img src="http://127.0.0.1:8182/img/abc/15.jpg" class="img200_silver"></li>
		</ul>
		<p>建设银行</p>
		<ul>			
			<li><img src="http://127.0.0.1:8182/img/ccb/1.jpg" class="img200_red"></li>
			<li><img src="http://127.0.0.1:8182/img/ccb/2.jpg" class="img200_red"></li>
			<li><img src="http://127.0.0.1:8182/img/ccb/3.jpg" class="img200_red"></li>
			<li><img src="http://127.0.0.1:8182/img/ccb/4.jpg" class="img200_red"></li>
			<li><img src="http://127.0.0.1:8182/img/ccb/5.jpg" class="img200_red"></li>
			<li><img src="http://127.0.0.1:8182/img/ccb/6.jpg" class="img200_red"></li>
			<li><img src="http://127.0.0.1:8182/img/ccb/7.jpg" class="img200_red"></li>
			<li><img src="http://127.0.0.1:8182/img/ccb/8.jpg" class="img200_red"></li>
			<li><img src="http://127.0.0.1:8182/img/ccb/9.jpg" class="img200_red"></li>
			<li><img src="http://127.0.0.1:8182/img/ccb/10.jpg" class="img200_red"></li>
			<li><img src="http://127.0.0.1:8182/img/ccb/11.jpg" class="img200_red"></li>
			<li><img src="http://127.0.0.1:8182/img/ccb/12.jpg" class="img200_red"></li>
			<li><img src="http://127.0.0.1:8182/img/ccb/13.jpg" class="img200_red"></li>
			<li><img src="http://127.0.0.1:8182/img/ccb/14.jpg" class="img200_red"></li>
			<li><img src="http://127.0.0.1:8182/img/ccb/15.jpg" class="img200_red"></li>
			<li><img src="http://127.0.0.1:8182/img/ccb/16.jpg" class="img200_red"></li>
			<li><img src="http://127.0.0.1:8182/img/ccb/17.jpg" class="img200_red"></li>
			<li><img src="http://127.0.0.1:8182/img/ccb/18.jpg" class="img200_red"></li>
			<li><img src="http://127.0.0.1:8182/img/ccb/19.jpg" class="img200_red"></li>
			<li><img src="http://127.0.0.1:8182/img/ccb/20.jpg" class="img200_red"></li>
			<li><img src="http://127.0.0.1:8182/img/ccb/21.jpg" class="img200_red"></li>
			<li><img src="http://127.0.0.1:8182/img/ccb/22.jpg" class="img200_red"></li>
			<li><img src="http://127.0.0.1:8182/img/ccb/23.jpg" class="img200_red"></li>
			<li><img src="http://127.0.0.1:8182/img/ccb/24.jpg" class="img200_red"></li>
			<li><img src="http://127.0.0.1:8182/img/ccb/25.jpg" class="img200_red"></li>
			<li><img src="http://127.0.0.1:8182/img/ccb/26.jpg" class="img200_red"></li>
			<li><img src="http://127.0.0.1:8182/img/ccb/27.jpg" class="img200_red"></li>
		</ul>
	</body>

5.部署Springboot应用

启动SpringBoot之后监听8182端口

6.部署tomcat

在linux 上部署tomcat过程略

测试页面img_list.html放在/home/soft/apache-tomcat-8.5.58/webapps/ROOT/

[root@myCloudServer ROOT]# ll
total 192
-rw-r----- 1 root root 27235 Sep 11 05:50 asf-logo-wide.svg
-rw-r----- 1 root root   713 Sep 11 05:47 bg-button.png
-rw-r----- 1 root root  1918 Sep 11 05:47 bg-middle.png
-rw-r----- 1 root root  1401 Sep 11 05:47 bg-nav.png
-rw-r----- 1 root root  3103 Sep 11 05:47 bg-upper.png
-rw-r----- 1 root root 21630 Sep 11 05:47 favicon.ico
-rw-r--r-- 1 root root  5837 Nov  9 14:55 img_list.html
-rw-r----- 1 root root 12219 Sep 11 05:50 index.jsp
-rw-r----- 1 root root  7136 Sep 11 05:50 RELEASE-NOTES.txt
-rw-r----- 1 root root  5581 Sep 11 05:50 tomcat.css
-rw-r----- 1 root root  2066 Sep 11 05:47 tomcat.gif
-rw-r----- 1 root root  5103 Sep 11 05:47 tomcat.png
-rw-r----- 1 root root  2376 Sep 11 05:47 tomcat-power.gif
-rw-r----- 1 root root 67795 Sep 11 05:50 tomcat.svg
drwxr-x--- 2 root root  4096 Sep 18 22:38 WEB-INF
[root@myCloudServer ROOT]#

在浏览器输入测试地址http://xxx.xxx.xxx.xxx:8080/img_list.html

截图如下：

总结：

远程访问http://xxx.xxx.xxx.xxx:8080/img_list.html端口得到HTML，在html里面图片文件的url 是下面这样：

<li><img src="http://127.0.0.1:8182/img/icbc/1.jpg" class="img200"></li>
<li><img src="http://127.0.0.1:8182/img/icbc/2.jpg" class="img200"></li>
<li><img src="http://127.0.0.1:8182/img/icbc/3.jpg" class="img200"></li>
<li><img src="http://127.0.0.1:8182/img/icbc/4.jpg" class="img200"></li>

img目录下有三个子文件夹ccb、icbc、abc，而且img根目录下也有一部分图片文件。

访问的是tomcat 本地的8182端口的img/icbc下面的图片文件，为何是img呢，因为这里设置的是img

@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
	registry.addResourceHandler("/img/**")
			.addResourceLocations(imgPath);
}

这样设置之后，只要在/home/app/img_test/images下设置好图片文件/文件夹，并且在模板中指定相对路径和图片文件名就可以访问到新的图片文件

例如在/home/app/img_test/images下新增一个图片文件9a504.jpeg

直接输入测试地址：http://xxx.xxx.xxx.xxx:8182/img/9a504.jpeg

-清风明月-

关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
spring boot 直接通过url访问外部静态资源图片

SpingBoot应用某些情况下需要外部的资源图片，例如要访问/home/app/img_test/images目录下图片，其实方法比较多，今天只介绍其中一种实现WebMvcConfigurer接口的addResourceHandlers方法。SpingBoot应用HTTP监听端口8182tomcat服务端口80801. 定义WebMvcConfiguration@Configurationpublic class WebMvcConfiguration implements WebMv
复制链接

扫一扫