php小編西瓜在這篇文章中將向大家介紹如何使用Thymeleaf將圖像添加到HTML頁面。 Thymeleaf是一個受歡迎的伺服器端Java模板引擎，它允許我們在HTML頁面中使用動態資料。添加圖像是網頁設計中常見的需求，Thymeleaf提供了簡單而強大的功能來實現這一目標。在接下來的內容中，我們將學習如何使用Thymeleaf標籤和表達式來引用和顯示圖像。無論你是初學者還是有經驗的開發者，本文都將為你提供有用的指導，讓你輕鬆地將圖像添加到HTML頁面中。
我的問題是我的 thymeleaf 區塊在 html 頁面上不顯示圖片和捷徑圖示
我嘗試使用檔案路徑：
並且也嘗試使用rest api：
有控制器：
@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 而不是圖像...
如果您使用預設配置，則您放入src/main/resources的任何內容都會複製到類別路徑中。因此，您不應在程式碼中引用src/main/resources，而應引用類別路徑本身。
如果您在本地運行，它可能仍然可以工作，但是一旦您在其他地方運行 jar 文件，它就會完全崩潰。
所以理想情況下，您應該將控制器重寫為：
// 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));
由於從文件中檢索資源是一項常見任務，因此您實際上不必讀取位元組。 您可以使用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);
您甚至可以縮短這個時間，因為從類別路徑檢索資源非常常見，因此有一個classpathresource類別：
return new classpathresource("static/logo.png");
這還不是全部，通常情況下，您需要從類別路徑提供web 資源，因此在spring boot 中，classpath:static/資料夾或classpath:public/資料夾中的所有內容都已經在網路上。所以通常情況下，您的映像已經可以在http://localhost:8080/logo.png上使用，而不需要您的控制器方法。
所以通常您可以完全刪除該控制器方法。
這給我們帶來了第二個問題。目前，您使用@{/api/v1/logo}或@{src/main/resources/static/logo.png}來引用您的圖片。 thymeleaf 將@{path/to/file}解釋為上下文相關url，因此它唯一做的就是在上下文路徑前面添加上下文路徑（如果有的話）並期望該檔案在http ://localhost:[serverport ]/[contextpath]/path/to/file。
但正如我們之前所確定的，您的映像應該可以在http://localhost:8080/logo.png上找到，因此，您應該使用@{/logo. png}:
如果這不起作用，那麼：
src/main/resources。classpath:static/或classpath:public/內的任何內容。以上是如何使用 Thymeleaf 將圖像新增至 html 頁面？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
