SpringBoot项目中js、css、图片等静态资源文件引用访问问题

r囧r小猫 2022-04-24 02:12 559阅读 0赞

SpringBoot之所以能简化WEB应用开发， 就是因为它遵循了“约定优于配置”这一基本原则。怎么理解这句话呢？大白话就是这个东西只要你按SpringBoot的约定放在这里，那么你在任何地方都可以使用，而且是不用配置就可以使用，这就是“约定优于配置”，因为已经约定好了，你懂，SpringBoot也懂，那还配置干嘛，用就行。

### 言归正传： ###

有的朋友在从网上学习这一块的时候可能会看到有的是这么说的，  
需要在application.properties配置：

#设定静态文件路径包括js，css等(springboot默认的静态资源文件是在static目录下，也可以自定义添加路径)
    spring.mvc.static-path-pattern=/static/**

这种操作可以实现静态资源的访问，但是总感觉有点自己束缚自己，因为这样配置的话，静态资源就只能放在这个路径下了。

其实，Spring Boot的默认静态资源（js,css,图片）的路径为以下四个：  
classpath:/META-NF/resources/  
classpath:/resources/  
classpath:/static/  
classpath:/public/  
这四个路径的优先级从上往下依次降低，如果你用springboot默认的路径存放静态资源的话，什么都不用配置，并且这四个路径都可以使用。  
我们来测试下，顺便测试一下这几个路径的优先级：  
1、四张图片  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70]  
图片中我分别写了这四个路径，我会把它们的名称都改成1.png，然后分别放到这四个路径下：  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 1][]  
图片我已经放进去了，并且没有在application.properties文件中做任何相关静态资源的配置。  
2、编写页面展示图片。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 2]  
页面代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <img src="${basePath}/1.png">
    </body>
    </html>

①运行测试1(四个路径下分别都有一张名称为1.png的图片)：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 3]  
可以看到页面中展示的是存放在`classpath:/META-INF/resources`路径中的图片

②运行测试2（删掉`classpath:/META-INF/resources`路径下的1.png）：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 4]  
可以看到页面中展示的是存放在`classpath:/resources`路径中的图片

③运行测试3（删掉`classpath:/resources`路径下的1.png）：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 5]  
可以看到页面中展示的是存放在`classpath:/static`路径中的图片  
④运行测试4（删掉`classpath:/static`路径下的1.png）：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 6]  
可以看到页面中展示的是存放在`classpath:/public`路径中的图片

# 其实springboot给我们默认的配置就够用了，多余配置只会限制自己，当然你要是愿意把这几个路径都配置上去也可以达到这种效果，可是何必呢？ #

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70]: /images/20220221/dad5ac403e734335b7be6f940413c2ec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 1]: /images/20220221/840d9c0e36564fe09b8f1f5041461c61.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 2]: /images/20220221/692a13a6723a457b943dcc623a95f909.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 3]: /images/20220221/727a64b415dd4649b695a862b7c47e6a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 4]: /images/20220221/fb3e76ea8d224db8857eede8740004c5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 5]: /images/20220221/c934e745341a46f284cf0806749947d5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 6]: /images/20220221/e54f7365f0b748c180efd9fa867eed18.png