在百里香弹簧框架中插入本地目录中的图像(使用maven)

时间:2015-04-05 18:17:18

标签: html spring maven thymeleaf

我使用此链接开发了一个项目: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文件的同一目录中,但它无法正常工作。我甚至试图给出完整的路径但没有用。这是一个ubuntu操作系统。请帮帮我。有没有我可以配置基本路径的地方,或者基本上如何从我的本地文件夹中放置图像。

7 个答案:

答案 0 :(得分:26)

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

上下文相关网址

  

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

作为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与上下文相关的URL非常相似,除了   他们不认为您希望您的URL链接到资源   在应用程序的上下文中,因此允许您链接到   同一服务器中的不同上下文

语法:

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

输出为:

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

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

来自:Thymeleaf documentation

答案 1 :(得分:7)

您需要了解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或百万美元模板的路径在这里完全无关紧要。重要的是页面的URL,如浏览器的地址栏中所示。在典型的Spring MVC应用程序中,此URL是发送初始请求的控制器的URL。

如果图像的路径是绝对路径:

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

然后浏览器会向网址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图片应位于位于网络应用根目录下的文件夹images中。

答案 2 :(得分:2)

获取Internet链接:

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

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

答案 3 :(得分:1)

我用过类似波纹管的东西。

我的图像路径就像波纹管一样。

enter image description here

我已经用下面的代码加载图像了

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

对我来说很好。

答案 4 :(得分:1)

最近我遇到了类似的问题,但就我而言,春季安全问题出了问题。如其他答案和文档中所述:

>>>my_string = b'My Great Name\xf0\x1e\x23\x23\xe1\x06\xbc\x1b\x8a\xf7\x00\x00\x00\x00\x00\x00\x00'
>>>extract_name(my_string)
'My Great Name'

应该足够了。但是由于已将Spring安全性添加到我的项目中,所以我必须全部 / img / **来获取请求并添加 addResourceHandlers 。这是代码:

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

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

答案 5 :(得分:0)

谁检索链接动态使用此模式

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

如果您这样使用(${theUser.avatar}),它将添加?在上述版本中,链接看起来像这样:/resources/images/avatars/photoname.png

答案 6 :(得分:0)

正如 DimaSan 在这里所说的https://stackoverflow.com/a/40914668/12312156 你应该像这样设置图像源:

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