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

Question

我使用这个链接开发了一个项目: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操作系统.请帮帮我.有没有我可以配置基本路径的地方或基本上如何从我的本地文件夹中放置图像.

Answer 1

我希望您查看Thymeleaf的标准URL语法文档,特别是上下文相关和服务器相对URL模式.

上下文相对URL:

如果要链接webapp中的资源,则应使用上下文相对URL.这些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非常相似,除非它们不希望您的URL链接到应用程序上下文中的资源,因此允许您链接到同一服务器中的不同上下文

句法:

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

输出为:

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

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

来自:Thymeleaf文件

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

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

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

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

为了能够引用图像,无论页面的URL是什么,绝对路径因此是优选的并且更易于使用.

在上面的示例中,/myWebApp是应用程序的上下文路径,您通常不希望在路径中进行硬编码,因为它可能会更改.值得庆幸的是,根据thymeleaf文档,thymeleaf理解并为上下文相关路径提供了一种语法,从而将路径/images/test.png转换为/myWebApp/images/test.png.所以你的形象应该是这样的

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

(我从未使用过thymeleaf,但这是我从文档中推断的).

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

Answer 3

在互联网上获取链接：

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

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