springboot结合thymeleaf插入背景图片

最新推荐文章于 2022-03-05 11:00:50 发布

这个名字先用着

最新推荐文章于 2022-03-05 11:00:50 发布

阅读量6.9k

点赞数 2

分类专栏： springboot 文章标签： html

本文链接：https://blog.csdn.net/weixin_38568503/article/details/109728264

版权

springboot 专栏收录该内容

37 篇文章 3 订阅

订阅专栏

问题描述：

做首页的时候想做一个背景图片。然后使用thymeleaf模板不知道怎么弄了，网上找了好多资料，发现不好使。

原因分析：

我们的html在templates下，我们的js,css在static目录下，这里就不同于静态资源那样把所有的东西都放在static下那样直接访问。

static下的代码：

<div class="detail" style="background-image: url(img/img1.jpg)"></div>

解决方案：

templates下的html代码：环境springboot2.3.5,thymeleaf3.0

<!-- thymeleaf约束 -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<div class="detail" style="background-image: url(${img/changandaxue.jpg})"></div>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

这个名字先用着

关注关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

SpringBoot入门实战：SpringBoot整合Thymeleaf

程序员光剑

11-14

1.背景介绍近几年来，随着Web前端技术的飞速发展，前后端分离架构已经成为主流。Spring Boot致力于简化开发过程、提升效率，并提供各种开箱即用的微服务架构组件。Thymeleaf是一个开源Java模板引擎库，能够帮助用户实现动态页面渲染功能。通过本文，作者将结合SpringBoot、Thymeleaf一起快速构建一个简单的博客网站，

SpringBoot

AyinMars的博客

04-10

4311

SpringBoot 什么是SpringBoot？ SpringBoot呢，就是一个javaweb的开发框架，和SpringMVC类似，对比其他javaweb框架的好处，官方说是简化开发，约定大于配置， you can “just run”，能迅速的开发web应用，几行代码开发一个http接口。所有的技术框架的发展似乎都遵循了一条主线规律：从一个复杂应用场景衍生一种规范框架，人们只需要进行各种配置而不需要自己去实现它，这时候强大的配置功能成了优点；发展到一定程度之后，人们根据实际生产应用情况，选取其

1 条评论您还未登录，请先登录后发表或查看评论

SpringBoot+Thymeleaf实现html文件引入（类似include功能）

hustwht的专栏

01-26

9923

由于对高大上的前端处理不太熟悉，想直接通过MVC的方式进行内容传递，因此选用了Thymeleaf模版处理向前端传值的问题。但是觉得很多PHP框架所实现的include模版的方式很不错，能够很好的实现头文件、导航、页尾等和主要内容的解耦，因此想通过使用Thymeleaf模版的同时，也能实现类似于include的功能。思路和背景觉得如果有精力，最好还是RESTFul的结构，然后前端采用ang

thymeleaf引入静态图片_最近在使用vue时，发现既然不会引入图片，于是我开始怀疑自己...

weixin_39580950的博客

11-25

1920

于是，我就下定决心再学习了一遍！简直太悲哀了！猿生太悲哀！接下来我们来看看，图片引入无非是路径问题，路径就会有绝对路径，和相对路径这两个说法。有一种引入方式就是直接引入绝对路径还有一种引入方式，相对路径当然静态资源的几种引入方式在 JavaScript 被导入或在 template/CSS 中通过相对路径(以 . 开头)被引用。这类引用会被 webpack 处理。诸如、background: ur...

thymeleaf模板页中背景图设置

追的博客

08-04

5717

平常我们在html中设置背景图片一般是这样： <body style="background-image:url(images/light.png);"> 但在thymleaf 中这样是行不通的，即便你能在html中点开并能看到图片，等你把项目跑起来就会发现没有效果。所以应该改成这样一： <body th:style="'background-image: url(./light.png)'"> 不要忘了在html中引入thymleaf 。还有一种更粗暴的方法...

themyleaf 图片上传_在thymeleaf spring框架中插入一个来自本地目录的图像（使用maven）...

weixin_39946460的博客

12-21

207

I have developed a project using this link: https://spring.io/guides/gs/serving-web-content/ I used maven to develop above project.I have two html files under this. abc.html and xyz.html. To insert im...

thymeleaf引用图片_SpringBoot访问静态资源（图片、html）以及整合thymeleaf 注意点

weixin_39636696的博客

12-22

4451

static和templates 是springboot默认创建的文件夹，static中放静态页面，而templates中放动态页面存放在static目录下，浏览器可以直接访问 http://localhost:8080/index.html，图片资源以及css,js可以放在此目录下，而templates 不能访问若整合thymeleaf,需要引入jarimplementation 'org.s...

springboot 添加背景图片

qq_43718758的博客

03-05

4429

1.目录结构 1.图片不能放到templates中，自己试了显示不出来 2.背景设置背景的路径和位置很重要，否则显示不出来结果：图片没有自适应我们在body中单独设置 <body style=" background-repeat:no-repeat ; background-size:100% 100%; background-attachment: fixed;"> 实现效果：完整显示参考文章：https://blog.csdn.net/qq_364810

springboot mybatis学生管理系统基本框架

08-14

对于前端展示，可以选择Thymeleaf、FreeMarker等模板引擎，或者利用SpringBoot与Vue.js、React等现代前端框架的结合，构建响应式、交互性强的用户界面。总的来说，SpringBoot MyBatis的学生管理系统基础框架具备了...

基于springboot的高校教师电子名片系统源码数据库.doc

03-09

基于SpringBoot的高校教师电子名片系统是一个结合了现代Web技术和数据库技术的实用系统。它不仅简化了信息管理的过程，还提高了信息管理的准确性和效率。通过采用B/S三层架构模式和SSM技术栈，系统具备良好的可扩展...

spring boot thymeleaf 图片上传web项目根目录操作步骤

08-27

主要介绍了spring boot thymeleaf 图片上传web项目根目录步骤,本文给大家提到了thymeleaf的基础知识，需要的朋友可以参考下

springboot556医院档案管理系统的设计与实现代码pf.rar