php小編西瓜在這篇文章中將向大家介紹如何使用Thymeleaf將圖像添加到HTML頁(yè)面。Thymeleaf是一個(gè)流行的服務(wù)器端Java模板引擎，它允許我們?cè)贖TML頁(yè)面中使用動(dòng)態(tài)數(shù)據(jù)。添加圖像是網(wǎng)頁(yè)設(shè)計(jì)中常見(jiàn)的需求，Thymeleaf提供了簡(jiǎn)單而強(qiáng)大的功能來(lái)實(shí)現(xiàn)這一目標(biāo)。在接下來(lái)的內(nèi)容中，我們將學(xué)習(xí)如何使用Thymeleaf標(biāo)簽和表達(dá)式來(lái)引用和顯示圖像。無(wú)論你是初學(xué)者還是有經(jīng)驗(yàn)的開發(fā)者，本文都將為你提供有用的指導(dǎo)，讓你輕松地將圖像添加到HTML頁(yè)面中。

問(wèn)題內(nèi)容

我的問(wèn)題是我的 thymeleaf 塊在 html 頁(yè)面上不顯示圖像和快捷方式圖標(biāo)

我嘗試使用文件路徑：

<img class="logo" th:src="@{src/main/resources/static/logo.png}" alt="logo">

并且還嘗試使用rest api：

<img class="logo" th:src="@{/api/v1/logo}" alt="logo">

有控制器：

@RestController
@RequestMapping("/api/v1/logo")
public class LogoController {

    @GetMapping(produces = MediaType.IMAGE_JPEG_VALUE)
    public Resource getLogo() throws IOException {
        return new ByteArrayResource(Files.toByteArray(new File("src/main/resources/static/logo.png")));
    }
}

而且我總是得到 alt 而不是圖像...

解決方法

問(wèn)題1：正確讀取文件

如果您使用默認(rèn)配置，則您放入 src/main/resources 的任何內(nèi)容都會(huì)復(fù)制到類路徑中。因此，您不應(yīng)在代碼中引用 src/main/resources，而應(yīng)引用類路徑本身。

如果您在本地運(yùn)行，它可能仍然可以工作，但是一旦您在其他地方運(yùn)行 jar 文件，它就會(huì)完全崩潰。

所以理想情況下，您應(yīng)該將控制器重寫為：

// get location from classpath
uri location = getclass().getclassloader().getresource("static/logo.png").touri();
// get file
path file = paths.get(location);
// read bytes
return new bytearrayresource(files.readallbytes(file));

由于從文件中檢索資源是一項(xiàng)常見(jiàn)任務(wù)，因此您實(shí)際上不必讀取字節(jié)。 您可以使用 filesystemresource 代替 bytearrayresource：

// get location from classpath
uri location = getclass().getclassloader().getresource("static/logo.png").touri();
// get file
path file = paths.get(location);
return new filesystemresource(file);

您甚至可以縮短這個(gè)時(shí)間，因?yàn)閺念惵窂綑z索資源非常常見(jiàn)，因此有一個(gè) classpathresource 類：

return new classpathresource("static/logo.png");

這還不是全部，通常情況下，您需要從類路徑提供 web 資源，因此在 spring boot 中， classpath:static/ 文件夾或 classpath:public/ 文件夾中的所有內(nèi)容都已經(jīng)在網(wǎng)絡(luò)。所以通常情況下，您的圖像已經(jīng)可以在 http://localhost:8080/logo.png 上使用，而不需要您的控制器方法。

所以通常您可以完全刪除該控制器方法。

問(wèn)題2：正確引用文件

這給我們帶來(lái)了第二個(gè)問(wèn)題。目前，您使用 @{/api/v1/logo} 或 @{src/main/resources/static/logo.png} 引用您的圖像。 thymeleaf 將 @{path/to/file} 解釋為上下文相關(guān) url，因此它唯一做的就是在上下文路徑前面添加上下文路徑（如果有的話）并期望該文件在 http://localhost:[serverport ]/[contextpath]/path/to/file。

但正如我們之前所確定的，您的圖像應(yīng)該可以在 http://localhost:8080/logo.png 上找到，因此，您應(yīng)該使用 @{/logo.png}:

<img class="logo" th:src="@{/logo.png}" alt="Logo">

如果這不起作用，那么：

• 您可能錯(cuò)誤配置了構(gòu)建工具，未在類路徑中包含 src/main/resources。
• 您可能已將 spring boot 配置為不自動(dòng)提供 classpath:static/ 或 classpath:public/ 內(nèi)的任何內(nèi)容。

以上是如何使用 Thymeleaf 將圖像添加到 html 頁(yè)面？的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！