I have persisted entity with field text. Inside text I have part to replace. myEntity.text:
some text
twoImages[12_v13.PNG, 10_v6.PNG]
text text text
twoImages[12_v13.PNG, 10_v6.PNG]
<h1>And HTML</h1>
So in view I want to use something like th:utext. But with replaced images blocks with th:fragment (~15 lines per fragment).
Output should be like this:
some text
<img .. 12_v13.PNG />
<br />
<img .. 12_v13.PNG />
<additional html />
text text text
<img .. 12_v13.PNG />
<br />
<img .. 12_v13.PNG />
<additional html />
<h1>And HTML</h1>
How to realize this with Thymeleaf?
If the entire text of the field is a single string, you will have to parse it using regex matcher or some generated parser. Say [12_v13.PNG, 10_v6.PNG] has to be parsed e.g. with
\\[([^,]),\\s([^\\]]*)]
The first group will give 12_v13.PNG, the second one - 10_v6.PNG.
You need to provide the path to each of the images in src property of img tag.
You can achieve the result this way:
<img th:src="#{/images/test.png}" />
It is implied, that /images folder is within webapp folder of your project.
<img th:src="#{/resources/images/Picture.png}" />
Output as:
<img src="/resources/image/Picture.png" />
When you hit http://localhost:8080/myapp/resources/images/Picture.png in you browser then you should be able to access the image for the above syntax to work.
This link is useful: Standard URL Syntax
Please have a look at my thymeleaf demo project: demo project (the folder with templates will get opened) You'll find data on project structure and examples of thymeleaf templates.
Related
I've got a Springboot thymeleaf project I'm working on.
The page I've got has the following line:
<img id="global-icon" th:if="${user.isGlobal()}" src="/img/global-icon.png" />
When this page is loaded, the result is
<img id="global-icon" src="https://www.example.com/mySubPage/2323/img/global-icon.png" />
However, I want it to render as:
<img id="global-icon" src="https://www.example.com/img/global-icon.png" />
and I'm not understanding why it is trying to pull my image from the subpage as the root.
Use src="#{/img/global-icon.png}"
See the Thymeleaf documentation for more detail.
I'm creating a fantastic HTML editor. I haven't thought about the title, so it's gonna be "HTML Editor." The input (in the code below) is to name the file. how could I name a file using the HTML's JavaScript components? Is there anything wrong with the code, or what?
<input id="title" required placeholder="File Name" title="Please fill this space up, and don't include symbols.">
<a download href="data:text/html;utf-8,(contents)"> <button>Download File</button> </a>
The downloading part is great and all, and I'm glad to say it's working, but... the name "download" is pretty irritating. Can you help me out here?
You need to set the download attribute to your filename.
<a download="filename.jpg" ... />
I have a controller that returns a ReponseEntity<byte[]> image and I can show it with the following tag:
<img th:src="#{'./my-files/main-logo'}"
I can also show an image from the /img/ folder with this tag:
<img th:src="#{/img/default-logo.png}"
I want to show the image from the database when it is present, and the image from the folder as a default if the ResponseEntity is null.
I tried all kind of ternary conditions but none of them worked.
Any suggestions?
Try using the attribute th:if="${...}" in your <img /> tag.
You can try to call the method which returns the image programatically (e.g. nameOfTheImageController.getImage(...)) and add a boolean to your model that represents whether the image is null or not.
Then, you can just add that boolean variable in the <img>'s th:if.
UPDATE
As mentioned in a comment in
HTML, Thymeleaf - displaying an image conditionally, you should wrap your <img> tag inside a <div> and put the th:if attribute in the <div> tag instead.
In my opinion, instead of changing the src of the image, you should change your /my-files/main-logo controller to return img/default-logo.png as a the ResponseEntity<byte[]> if there is no main-logo. That way you can just leave your image tag as is:
<img th:src="#{'./my-files/main-logo'}" />
If you don't want to do that, then yes, you'll have to add something to your controller that tells you whether or not you have a main logo. Something like this for example:
<img th:if="${has_logo}" th:src="#{'./my-files/main-logo'}" />
<img th:unless="${has_logo}" th:src="#{/img/default-logo.png}" />
Please use the following syntax. in your controller add a model attribute hasImageInDatabase when response is null. then from thymeleaf use the below syntax.
<img th:src="${(hasImageInDatabase ?: '/my-files/main-logo': '/img/default-logo.png'}"/>
This will work for you:
<img th:src="./my-files/main-logo" onerror="this.onerror=null;this.src='/img/default-logo.png';">
It means if the first link to the photo didn't work ("./my-files/main-logo" ) or was null, it will show the second photo('/img/default-logo.png').
i have a problem with converting html output from creditor to my pdf.
I use the XMLWorkerHelper.parseToElementList method to read out the database field with the html code of the ckeditor, but not all of the content are rendered in the pdf document.
I figure out that its only affects elements of type 10 (CHUNK, if i'm right) and the content of this chunk is empty, if i print it to the console.
I reconfigure ckeditor to use <br/> instead of <p>-tags
Here an example of an html code from ckeditor:
MS Office (Word, Excel, PowerPoint)<br/>SAP<br/>Adobe Photoshop<br/>IBM SPSS Statistics<br/>EFS Survey<br/>CMS<br/>
or
Kernfach: Sozialwissenschaft<br />
Note: <u><strong>1,7</strong></u><br />
<br />
Nebenfach: Rechtswissenschaft<br />
Note: <u><strong>2,3</strong></u><br />
<br />
<br />
Abschluss: <strong>Bachelor of Arts</strong><br />
<br />
Abschlussnote: <strong><u>1,9</u></strong>
Only the text between the tags are rendered, the other/normal text are ignored
Is this a problem of misconfiguration or do i have modify the content before pass it to the XMLWorkerHelper?
i'm thankful for tips to solve my problem.
regards
Rizzi
<a href="printAllocation.action?event=printAllocation&fundAlias=%{fundAlias}&fundName=%{fundName}&lendFromMonth=%{lendFromMonth}&lendFromYear=%{lendFromYear}&partListDate=%{partListDate}&partListType=%{partListType}&secLendIncome=%{secLendIncome}"
onClick="NewWindow(this.href,'Warning','1000','800','Yes');return false;">
<s:submit value="Print" cssClass="btnRedApple">
</s:submit></a>
Hi! in the above code I'm trying to pass the values from the current jsp to new window by using anchor tag for the button "print" but in new window I'm not getting the values.
This is done for the struts2 migration so can any one please help me in resolving this issue. how can I pass the value to the new window
Looks like you have a URL with many parameters. What makes it worse is including the URL in anchor tag. I suggest you use s:url of stuts 2.
Struts 2 “url” tag is used to create an URL and output it as a text
format. It’s never work by itself, but it can provides URL to other
tags like to create a hyperlink or to render an image
<s:url action="printAllocation.action" var="urlTagValue" >
<s:param name="event">printAllocation</s:param>
<s:param name="fundAlias" value="%{fundAlias}"></s:param>
<s:param name="fundName" value="%{fundName}"></s:param>
...//all the other parameters
</s:url>
this essentailly generates output in text format like below.
/theDomainOfYourWebApp/printAllocation.action?event=printAllocation&fundAlias=...
Add then use it your anchor tag
<a href="<s:property value="#urlTagValue" />" onClick="NewWindow(this.href,'Warning','1000','800','Yes');return false;>URL Tag Action (via property)</a>