在thymeleaf spring框架中从本地目录插入图像（使用maven）

Posted 2023-02-26

【中文标题】在thymeleaf spring框架中从本地目录插入图像（使用maven）

【英文标题】：Inserting an image from local directory in thymeleaf spring framework (with maven)

【发布时间】：2015-06-10 05:19:20

【问题描述】：

我用这个链接开发了一个项目：https://spring.io/guides/gs/serving-web-content/我用maven开发了上面的项目。

我在这下面有两个 html 文件。 abc.html 和 xyz.html。为了在 html 页面中插入图片，我使用了这样的 url：

<img src="https://example.com/pic_mountain.jpg"  style="width:304px;height:228px">

但我想改用位于我的服务器中的图像文件。我尝试将文件放在 html 文件的同一目录中，但它不起作用。我什至尝试给出完整的路径，但没有用。这是一个 ubuntu 操作系统。请帮帮我。有什么地方可以配置基本路径或基本上如何从本地文件夹中放置图像。

【参考方案1】：

我希望您查看 Thymeleaf 的 Standard URL Syntax 文档，特别是上下文相关和服务器相关的 url 模式。

上下文相关网址：

如果你想在你的 webapp 中链接资源，那么你应该使用 上下文相对 url。这些是应该是的 URL 相对于 Web 应用程序根目录，一旦它安装在 服务器。例如，如果我们将 myapp.war 文件部署到 Tomcat 服务器，我们的应用程序可能会被访问​​为 http://localhost:8080/myapp，而 myapp 将是上下文名称。

作为 JB Nizet，以下内容对您有用，因为我在 webapp 项目中亲自使用过百里香，

<img th:src="@/images/test.png"/>

并且 test.png 应该位于 webapp 文件夹内的项目根目录下。大致浏览了一些东西，

Myapp->webapp->images->test.png

例如：

<img th:src="@/resources/images/Picture.png" />

输出为：

<img src="/resources/image/Picture.png" />

当您在浏览器中点击http://localhost:8080/myapp/resources/images/Picture.png 时，您应该能够访问图像以使上述语法起作用。并且您的资源文件夹可能会在您的应用程序的 webapp 文件夹下。

服务器相对网址：

服务器相对 URL 与上下文相对 URL 非常相似，除了 他们不认为您希望您的 URL 链接到资源 在您的应用程序的上下文中，因此允许您链接到 同一服务器中的不同上下文

语法：

<img th:src="@~/billing-app/images/Invoice.png">

输出为：

<a href="/billing-app/showDetails.htm">

如果您的服务器中存在名为 billing-app 的应用程序，上述图像将从与您的上下文不同的应用程序中加载。

来源：Thymeleaf documentation

【参考方案2】：

您需要了解 HTTP 的工作原理。当浏览器在 URL 处加载页面时

http://some.host/myWebApp/foo/bar.html

并且HTML页面包含

<img src="images/test.png"/>

浏览器将向服务器发送第二个 HTTP 请求以加载图像。由于路径是相对的，图像的 URL 将是 http://some.host/myWebApp/foo/images/test.png。请注意，绝对路径由页面的当前“目录”组成，并与图像的相对路径连接。服务器端 JSP 或 thymeleaf 模板的路径在这里完全无关紧要。重要的是页面的 URL，显示在浏览器的地址栏中。在典型的 Spring MVC 应用程序中，此 URL 是发送初始请求的控制器的 URL。

如果图片的路径是绝对路径：

<img src="/myWebApp/images/test.png"/>

然后浏览器将向 URL http://some.host/myWebApp/images/test.png 发送第二个请求。浏览器从网络服务器的根目录开始，拼接绝对路径。

为了能够引用图像，无论页面的 URL 是什么，因此绝对路径更可取且更易于使用。

在上面的示例中，/myWebApp 是应用程序的上下文路径，您通常不希望在路径中硬编码，因为它可能会改变。值得庆幸的是，根据thymeleaf documentation，thymeleaf 理解这一点并为上下文相关路径提供语法，从而将/images/test.png 之类的路径转换为/myWebApp/images/test.png。所以你的图像应该看起来像

<img th:src="@/images/test.png"/>

（我从未使用过百里香叶，但这是我从文档中推断出来的）。

因此，test.png 图像应该位于 webapp 根目录下的文件夹 images 中。

【参考方案3】：

在互联网上获取链接：

String src = "https://example.com/image.jpg";

HTML：<img th:src="@$src"/>

【参考方案4】：

我用过下面这样的..

我的图片路径如下..

我使用下面的代码来加载图像

 <img th:src="@imges/photo_male_6.jpg" >

对我来说很好用。

【参考方案5】：

最近我遇到了类似的问题，但就我而言，弹簧安全性出现了问题。如其他答案和文档中所述：

<img th:src="@/img/values.png" />

应该够了。但是由于我的项目中已经添加了spring security，我不得不全部/img/ **获取请求并添加addResourceHandlers。代码如下：

@Configuration
@EnableWebMvc
public class WebConfig extends WebMvcConfigurerAdapter 

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) 
        registry.addResourceHandler(
                "/webjars/**",
                "/img/**",
                "/css/**",
                "/js/**")
                .addResourceLocations(
                        "classpath:/META-INF/resources/webjars/",
                        "classpath:/static/img/",
                        "classpath:/static/css/",
                        "classpath:/static/js/");
    

    @Override
    protected void configure(HttpSecurity http) throws Exception 

        http.csrf().disable();
        http.sessionManagement().sessionCreationPolicy(SessionCreationPolicy.ALWAYS);

        http.authorizeRequests().antMatchers(HttpMethod.GET, "/js/**", "/css/**", "/img/**" ,"/pressiplus", "/public/**", "/index", "/", "/login").permitAll();
        http.authorizeRequests()
                .antMatchers("/secure/admin/**").hasAnyRole("ADMIN","USER")
                .antMatchers("/secure/admin/**").hasAnyRole("ADMIN")
                .and()
                .formLogin()  //login configuration
                    .loginPage("/login")
                    .failureUrl("/login-error")
                    .loginProcessingUrl("/login")
                    .usernameParameter("email")
                    .passwordParameter("password")
                    .successHandler(myAuthenticationSuccessHandler())
                .and()
                .logout()    //logout configuration
                .logoutUrl("/logout")
                .logoutSuccessHandler(myLogoutSuccessHandler)
                .and()
                    .rememberMe()
                        .tokenRepository(persistentTokenRepository())
                        .tokenValiditySeconds(7 * 24 * 60 * 60) // expires in 7 days
                .and()
                    .exceptionHandling() //exception handling configuration
                .accessDeniedHandler(accessDeniedHandler());
    

我希望这对将来的某人有所帮助

【参考方案6】：

动态检索链接的人使用此模式

<img class="image" th:src="@'/resources/images/avatars/'+$theUser.avatar" >

如果你像这样使用($theUser.avatar) 它会添加 ?在上面的版本链接看起来像这样：/resources/images/avatars/photoname.png

【参考方案7】：

正如 DimaSan 在这里所说的 https://***.com/a/40914668/12312156 您应该像这样设置图像 src：

 <img src="../static/img/signature.png" th:src="@img/signature.png"/>