我使用此链接开发了一个项目: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操作系统。请帮帮我。有没有我可以配置基本路径的地方,或者基本上如何从我的本地文件夹中放置图像。
答案 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
的应用程序,则将从与您的上下文不同的应用程序加载上述图像。
答案 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)
答案 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}"/>