thymeleaf img src动态参数赋值

最新推荐文章于 2022-04-21 20:39:28 发布
原创 最新推荐文章于 2022-04-21 20:39:28 发布 · 7k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #thymeleaf

本文分享了一种在使用Thymeleaf模板引擎时，成功设置图片路径的解决方案。作者尝试了多种写法，最终找到了正确的语法，能够使图片在网页中正确显示。

网上查了几种写法都不成功，写成下面这样就成功了。

 

<img th:src="@{(${xxx.xxx})}">

 

Springboot+thymeleaf+IDEA——如何给background-img：url(“”) 这种类型的标签设置值
简简单单Onlinezuozuo
05-29 1万+
文章目录Springboot+thymeleaf+IDEA——如何给background-img：url(“”) 这种类型的标签设置值1、设置背景2、直接嵌入样式代码 Springboot+thymeleaf+IDEA——如何给background-img：url(“”) 这种类型的标签设置值 1、设置背景 在设置时，要通过把样式属性分离开，然后通过表达式进行拼接的方式进行动态的设置，其它类似的...
SpringBoot开发——结合Thymeleaf模板整合HTML
bjzhang75的博客
09-05 2008
Thymeleaf是一个XML/XHTML/HTML5模板引擎，可用于Web与非Web环境中的应用开发。它是一个开源的Java库，基于Apache License 2.0许可。Thymeleaf提供了一个用于整合Spring MVC的可选模块，在应用开发中，你可以使用Thymeleaf来完全代替JSP或其他模板引擎，如Velocity、FreeMarker等。Thymeleaf的主要目标在于提供一种可被浏览器正确显示的、格式良好的模板创建方式，因此也可以用作静态建模。
thymeleaf img src动态参数赋值
好民小张的博客
10-24 944
thymeleaf img src动态参数赋值 <ul class="slides clearfix" th:each="imgList:${list}"> <li><img class="responsive" th:src="@{'~' + (${imgList})}"></li> </ul>
2022/4/21 盘点Thymeleaf遇到的坑
Abcdzzr的博客
04-21 1314
目录 1.当作用域的值为空时页面报错的问题 1.1 问题描述 1.2 解决方案 1.3详情请参考 2.使用th:src="@{}"获取不到动态的值 2.1问题描述 2.2解决方案 2.3关于thymeleaf img src动态参数赋值 3.使用控件传值传不到controller中 3.1问题描述 3.2解决方案 3.3那么如...
关于thymeleaf img src动态参数赋值
qq_41735871的博客
07-20 6483
关于thymeleaf img src动态参数赋值 1、在pom.xml中配置thymeleaf <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> 2、配置application.properties路径 应该以什么
thymeleaf img标签的赋值
shenxiaomo1688的博客
07-30 6010
如果引用的图片来自线上，直接赋值即可: <img src="https://baidu.com/xxx.jpg"> 如果是静态赋值，写法上略有不同: <img th:src="@{../img/001.jpg}"> 如果是动态赋值，前端代码 <img src="" id="weather-icon"> js代码： $("#weather-icon").attr("src","/weatherforecast/assets/weatherIcon/1.
Thymeleaf显示base64字符串为图片.docx
03-12
-- 使用Thymeleaf表达式将后台传递的Base64字符串设置为<img>标签的src属性 --> <img alt="64位字符串图片" th:src="${str64}" /> ``` 在这个HTML页面中，`<img>`标签的`th:src`属性使用Thymeleaf表达式 `${str...
Thymeleaf凭借URL，动态获取CDN服务器的CSS和JS文件的url
super_this_part的博客
11-29 1306
语法： @{XXXXX} <link rel="stylesheet" th:href="@{{host}/static/wangEditor/release/fullscreen.css(host=${hostname})}"/> <script type="text/javascript" th:src="@{{host}/static/js/jquery-3.4.1....
解决Thymeleaf 中 th:if、th:each、th:href、th:onclick、th:src等问题亲测
那杯热咖啡
08-10 5444
最近使用若依，对前端的thymeleaf语法不是很熟悉，下面是自己的笔记，大神请忽略。 一、th:if gt: great than（大于）> ge： great equal（大于等于）>= eq： equal（等于）== lt： less than（小于）< le： less equal（小于等于）<= ne： not equal（不等于）!= 写法如下，其它写法类似。 <div th:if="${substringNam...
备忘录《六》thymeleaf 使用学习总结、避免再次踩坑
半山闲人的专栏
01-11 1151
       最近使用Spring boot2+thymeleaf做了一个项目，由于第一次使用thymeleaf，所有遇到很多坑，不过更多坑是其他人写的博客，最让我无语的是，是我搜索如何在onclick里传对象，基本没有一个说对的，最坑的是，明明thymeleaf不允许在th:onclick中传String类型，他们写的博客都是传int的，他们自以为这个就是正确的传参，好吧，无语。真的博客十有八九...
SpringBoot thymeleaf th:src @PathVariable参数
蕃薯耀的博客
12-15 1284
================================ ©Copyright 蕃薯耀2021-12-15 ​​​​​蕃薯耀的博客_优快云博客 SpringBoot thymeleaf th:src @PathVariable参数传递，正确写法 <img alt="二维码" width="250px" height="250px" th:src="@{/warehouse/goods/getQrcode/{id}(id=${objDB?.id})}">...
Thymeleaf如何拼接href \src
热门推荐
LeonShenZhi的博客
07-27 2万+
src示例： &lt;img th:src="@{/img/research/{filename}(filename=${research.filename})}"&gt; href示例： &lt;a th:href="@{'https://'+${url.url}}" th:text="${url.urlName}"&gt;&lt;/a&gt;  
thymeleaf的href和src动态凭借参数（分页查询中条件分页）
MinisterZ的博客
05-04 717
th:href="@{/queryEquipList(pageNum=${pageInfo.hasNextPage}?${pageInfo.nextPage}:${pageInfo.pages},eqname=${equip.eqname},status=${equip.status}) }" 第一次查询带了参数，所以下一次在查询时要带上参数。 model.addAttribute(“equip”,equip); 然后获取equip拼接进去。 <script type="text/javascrip
Thymeleaf (三) ---------Thymeleaf 属性
在森林里麋了鹿
03-22 6590
目录一、th:action 属性二、th:method 属性三、th:href 属性四、th:src 属性五、th:text 属性六、th:style 属性七、th:each 属性1、循环列表2、遍历数组 Array 大部分属性和 html 的一样，只不过前面加了一个 th 前缀。 加了 th 前缀的属性，是经过模版引擎处理的 一、th:action 属性 定义后台控制器的路径，类似标签的 action 属性，主要结合 URL 表达式,获取动态变量 <form id="login" th:actio
Thymeleaf标签中动态拼接参数
qq_45604353的博客
07-13 1768
通过@{}拼接 @{}在这个里拼接。 // 代码展示 th:src="@{http://localhost:8080/static/images/{image}(image=${image})}" // 通过在@{}来拼接，其中{image}中引用后台传递的参数，${image} th:src="@{http://localhost:8080/static/images/{image}(image=${image})}" ...
thymeleaf: th:src="@{}"
cxy的博客
03-27 2万+
<div class="col-xs-6"> <a href="javascript:void(0);" title="点击更换验证码"> <img th:src="@{captcha/captchaImage?type=math}" class="imgcode" width="85%"...
html 页面 js 引用添加动态版本号
chunyanquan1444的博客
09-18 4188
因为没有使用 freeMarker 等模板，给静态文件增加动态版本号后缀无法从后端获取后渲染。 先使用了 document.write("<script src='../js/index.js?v="+Math.Random()+"'><"+'/'+"script>...
SpringBoot项目中使用模板引擎thymeleaf动态传参
abcjwg的专栏
03-31 1385
项目中使用模板引擎thymeleaf，遇到动态传参问题，使用th:attr来设置属性的值，现进行汇总，有问题及时讨论： 一、事件绑定JS且带参数 1、th:onclick示例： th:onclick="'doSendMsg(&quot;'+${userInfo.mobile}+'&quot;)'" th:onclick="'javascript:doSendMsg(\''+${userInfo.mobile}+'\',\''+${userInfo.name}+'\')'" 二、属性.
thymeleaf中th:src和th:href动态拼接参数
ashzdw的博客
02-11 4836
<link rel="stylesheet" type="text/css" th:href="@{/static/{sys}/css/common/commons.css(sys=${pageVO.sys})}" /> <script type="text/javascript" th:src="@{/static/{sys}/js/{sec}/info.js(sys=${pageVO.sys}, sec=${pageVO.section})}"></scr...
img src=""指定路径的字符串中，如何拼接变量
最新发布
07-25
在 HTML 中，`<img>` 标签的 `src` 属性用于指定图像的路径。如果需要在路径中拼接变量，通常需要借助前端模板引擎或 JavaScript 来实现动态路径的生成。 ### 使用模板引擎（如 Thymeleaf） 如果你使用的是 Thymeleaf 模板引擎，可以通过表达式拼接字符串来动态生成路径。例如，使用 `${}` 表达式插入变量并结合字符串： ```html <img th:src="@{'/images/' + ${imageName} + '.jpg'}" alt="Dynamic Image"> ``` 在这个例子中，`imageName` 是一个变量，它会被替换为实际的值，从而拼接成完整的路径，例如 `/images/example.jpg` [^2]。 ### 使用 JavaScript 动态生成路径 如果需要在运行时通过 JavaScript 动态设置 `<img>` 标签的 `src` 属性，可以使用字符串拼接的方式： ```html <img id="dynamicImage" src="" alt="Dynamic Image"> <script> var imagePath = "/images/"; var imageName = "example"; var imageExtension = ".jpg"; var fullImagePath = imagePath + imageName + imageExtension; document.getElementById("dynamicImage").src = fullImagePath; </script> ``` 上述代码通过 JavaScript 动态生成完整的图像路径，并将其赋值给 `<img>` 标签的 `src` 属性。 ### 使用模板字符串（ES6） 如果使用现代浏览器支持的 JavaScript 特性，可以使用模板字符串来简化路径拼接： ```html <img id="dynamicImage" src="" alt="Dynamic Image"> <script> var imageName = "example"; var fullImagePath = `/images/${imageName}.jpg`; document.getElementById("dynamicImage").src = fullImagePath; </script> ``` 模板字符串通过 `${}` 语法直接插入变量，使得路径拼接更加直观和简洁。 ### 注意事项 - 确保变量的值是安全的，避免路径注入问题。 - 如果使用模板引擎，确保变量的上下文正确传递。 - 路径拼接时注意斜杠 `/` 或反斜杠 `\` 的使用，确保路径格式正确。
评论 5
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

宏奕0920

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值