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

Question

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

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

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

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

Answer 1

您需要了解 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。请注意，绝对路径由页面的当前 "directory" 与图像的相对路径连接而成。服务器端 JSP 或 thymeleaf 模板的路径在这里完全不相关。重要的是页面的 URL，显示在浏览器的地址栏中。在典型的 Spring MVC 应用程序中，此 URL 是发送初始请求的控制器的 URL。

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

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

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

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

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

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

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

因此 test.png 图像应该位于 Web 应用程序根目录下的文件夹 images 中。

Answer 2

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

上下文相关 URL:

If you want to link resources inside your webapp then you should use context relative urls. These are URLs which are supposed to be relative to the web application root once it is installed on the server. For example, if we deploy a myapp.war file into a Tomcat server, our application will probably be accessible as http://localhost:8080/myapp, and myapp will be the context name.

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

<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:

Server-relative URLs are very similar to context-relative URLs, except they do not assume you want your URL to be linking to a resource inside your application’s context, and therefore allow you to link to a different context in the same server

语法：

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

输出为：

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

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

来源：Thymeleaf documentation

Answer 3

在 Internet 上获取 link：

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

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

Answer 4

我用过波纹管像..

我的图片路径如下..

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

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

它对我来说很好用。

Answer 5

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

<img th:src="@{/img/values.png}" alt="Media Resource"/>

应该够了。但是由于 spring 安全性已添加到我的项目中，我不得不为所有 /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());
    }

}

我希望这对以后的人有所帮助

Answer 6

谁检索 link 动态使用此模式

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

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

Answer 7

正如 DimaSan 所说你应该像这样设置图像源：

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

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

Inserting an image from local directory in thymeleaf spring framework (with maven)

html

spring

maven

thymeleaf