I want to show image in li tags using thymeleaf th:each.
I have tried to enter variable value of number into image src but image is not displayed.
how to thymeleaf th:each number variable input image src?
try code:
<th:block th:each="num: ${#numbers.sequence(1,22)}">
<li>
<img th:src="#{/images/sub/logo/company + ${num} + .jpg}">
</li>
</th:block>
and
<li th:each="num: ${#numbers.sequence(1,22)}">
<img th:src="#{/images/sub/logo/company + ${num} + .jpg}">
</li>
error:
http://localhost:8090/****/images/sub/logo/company%20+%20$%7Bnum%7D%20+%20.jpg
See the standard url syntax.
<li th:each="num: ${#numbers.sequence(1,22)}">
<img th:src="#{/images/sub/logo/company{i}.jpg(i=${num})}">
</li>
Related
I have lines like the following
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="javascript:getSearch('Deelnemer', 'asMemberSearch')">Zoekscherm deelnemers</a>
<a class="dropdown-item" href="javascript:getSearch('Reglement', 'asPlanSearch')">Zoekscherm reglementen</a>
...
</div>
I would like to generalize that into something like the following lines:
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a th:each="anchor : ${anchorList}"
th:text="${anchor.title}"
th:href="#{/searchCriteria/Search(anchor.object=${anchor.object})}"
class="dropdown-item"
href="javascript:getSearch('Deelnemer', 'asMemberSearch')">dummy</a>
</div>
However, I cannot see a way to put something after the th:href that allows me to have Javascript in there. I have tried th:href="#{/javascript:getSearch(anchor.object, anchor.search)}" but that delivers javascript:getSearch?anchor.object&anchor.search while what I want is javascript:getSearch('Deelnemer','asMemberSearch'). Documentation is here.
Your using the # notation where you don't want it. # is for urls relative to the context path. In your case you'r better of just using strings and $. for example th:href="'javascript:getSearch(\'' + ${anchor.object} + ', ' + ${anchor.search} + '\')'"
I'm trying to do an importxml on googlesheets, I'm trying to get the value within the first span tag "$2,760,771,621 USD" in the following code
<ul class="cmc-details-panel-stats k1ayrc-0 gkPvKy">
<li>
<div>
<span>$2,760,771,621 USD</span>
</div>
</li>
<li>
<div>
<span>$394,018,520 USD</span>
</div>
</li>
</ul>
I tried
=IMPORTXML("website.com","//ul[#class='cmc-details-panel-stats']")
and get a #N/A
How can this be done?
In this case, I would like to propose the xpath of //ul[contains(#class,'cmc-details-panel-stats')]/li[1]//span[1].
Modified formula:
=IMPORTXML(A1,"//ul[contains(#class,'cmc-details-panel-stats')]/li[1]//span[1]")
In this formula, the URL of https://coinmarketcap.com/currencies/cardano/ is put in the cell "A1".
Result:
Note:
In this case, I thought that the following sample HTML might be suitable for thinking the solution as the sample HTML.
<ul class="cmc-details-panel-stats k1ayrc-0 gkPvKy">
<li>
<div>
<span>$2,760,771,621 USD</span><span>###</span>
</div>
</li>
<li>
<div>
<span>$394,018,520 USD</span><span>###</span>
</div>
</li>
</ul>
Reference:
IMPORTXML
I am trying to display custom images for my list of objects. The images are stored in the database as one of the properties on the object and returned to my template in the model.
<ul>
<li th:each="fruit : ${MyPage.fruitList}">
<div class="field" th:onclick="'javascript:doSubmit(\'' + ${fruit.guid} + '\');'">
<ul>
<li th:each="property:${fruit.fruitProperties}">
<div th:if="${property.propertyName}=='fruit_image'">
<img alt="fruit_image" id="fruitImage" th:src="${property.propertyValue}" style="width:100px;height:100px;"></img>
</div>
</li>
</ul>
<label th:text="${fruit.name}" class="radio-label"></label>
</div>
</li>
</ul>
With above code, I am able to successfully display the image that is stored as property 'fruit_image' on the fruit object in database.
Now the question I have is, how do I display a default image if the property 'fruit_image' is not present on the fruit? Is there a way i can set a flag or variable inside the 'if'?
Thank you!
No, there isn't a way to change a variable in Thymeleaf like that. That being said, you can use collection projection to check for the existence of that property. For example, this is how I would do a default image:
<ul>
<li th:each="property:${fruit.fruitProperties}">
<div th:if="${property.propertyName}=='fruit_image'">
<img alt="fruit_image" id="fruitImage" th:src="${property.propertyValue}" style="width:100px;height:100px;"></img>
</div>
</li>
<li th:unless="${#lists.contains(fruit.fruitProperties.![propertyName], 'fruit_image')}">
<div>
<img alt="fruit_image" id="fruitImage" src="DEFAULT-IMAGE.jpg" style="width:100px;height:100px;"></img>
</div>
</li>
</ul>
Rather than looping through all the properties, something like this could work for you as well.
<ul th:with="has_image = ${#lists.contains(fruit.fruitProperties.![propertyName], 'fruit_image')}">
<li th:if="${has_image}">
<img alt="fruit_image" id="fruitImage" th:src="${fruit.fruitProperties.^[propertyName == 'fruit_image'].propertyValue}" style="width:100px;height:100px;" />
</li>
<li th:unless="${has_image}">
<img alt="fruit_image" id="fruitImage" src="DEFAULT-IMAGE.jpg" style="width:100px;height:100px;"></img>
</li>
</ul>
I'm trying to dynamically create a menu using basic logic, something like this.
List item
List item
List item
List item
List item
I made this code
<ul>
<div data-th-each="field, iter : ${fields}" data-th-remove="tag">
<div data-th-if="${field.text} != null" data-th-switch="${field.href}" data-th-remove="tag">
<li data-th-case="null" data-th-utext="${field.text}" >
<li data-th-case="*"><a data-th-href="${field.href}" data-th-utext="${field.text}" ></a>
</div>
<ul data-th-if="${field}" class="sub-menu">
<div data-th-each="prop, propIter : ${field.sub_items.sub_item.properties}" data-th-remove="tag">
<div data-th-if="${prop.text} != null" data-th-switch="${prop.href}" data-th-remove="tag">
<li data-th-case="null" data-th-utext="${prop.text}"></li>
<li data-th-case="*"><a data-th-href="${prop.href}" data-th-utext="${prop.text}"></a></li>
</div>
</div>
</ul>
</li>
</div>
</ul>
But it returns parsing errors, I think it's mostly a Thymeleaf/HTML problem.
It's probably because of the unclosed "li" tags in the switch statement but I'm not sure how to fix it.
Right, it has to be valid html before processing. You can't do any kind of tricks like you have above, even if the output would be valid html.
I think you should be able to restructure your html to look like this:
<ul>
<th:block data-th-each="field, iter : ${fields}" data-th-if="${field.text} != null">
<li>
<span data-th-if="${field.href == null}" data-th-utext="${field.text}" />
<a data-th-unless="${field.href == null}" data-th-href="${field.href}" data-th-utext="${field.text}" />
<ul data-th-if="${field}" class="sub-menu">
<th:block data-th-each="prop, propIter : ${field.sub_items.sub_item.properties}" data-th-if="${prop.text} != null">
<span data-th-if="${prop.href == null}" data-th-utext="${prop.text}" />
<a data-th-unless="${prop.href == null}" data-th-href="${prop.href}" data-th-utext="${prop.text}" />
</th:block>
</ul>
</li>
</th:block>
</ul>
I've never though about using data-th-remove="tag" like you have. But I think you should be using <th:block> instead for cases like this.
I am getting multiple image url in imagedata in this program
' function onPhotoDataSuccess(imageData) {
{$("#"+divId).children().attr('src',imageData);}
'
also onclick i am getting divID and then showing image based on "img" tag ID.
so my question is that how do we store image url and retrieve one by one for specific "img" tag
<a class="img" id="Image1"><img id="smallImage1" src="" /></a>
<span class="textarea"></span>
</li>
<li>
<a class="img" id="Image2"><img id="smallImage2" src="" /></a>
<span class="textarea"></span>
</li>
<li>
<a class="img" id="Image3"><img id="smallImage3" src="" /></a>
<span class="textarea"></span>
</li>
<li>
<a class="img" id="Image4"><img id="smallImage4" src="" /></a>
<span class="textarea"></span>
</li>
<li>
<a class="img" id="Image5"><img id="smallImage5" src="" /></a>
<span class="textarea"></span>
</li>
<li>
<a class="img" id="Image6"><img id="smallImage6" src="" /></a>
<span class="textarea"></span>
</li>'
I'm not clear on what is your goal. Can you clarify your question " how do we store image url and retrieve one by one for specific "img" tag ?"
Do you want to store the img url offline in the app ?
Can yo show your code to get divID and show image based on "img" tag ID ?
Is this a hybrid worklight app ? If it is and what you want is to store the img url offline, than you can take a look at JSON Store feature documentation here
http://www-01.ibm.com/support/knowledgecenter/SSZH4A_6.1.0/com.ibm.worklight.dev.doc/devref/c_jsonstore_overview.html?lang=en
JSON Store is a feature to store data locally in JSON format.