We Keep Coding

How to add static image in inline background-image css tag in Spring boot Thymleaf template?

I am developing a web application for learning purpose using java spring and Thyme leaf template engine.
In one of my Thymeleaf page, I want to add an image as a background-image using inline CSS. My image is in the static folder,
I have tried to use various method found on the internet but none of them worked.
I've searched and unfortunately failed to find out the solution to this problem.
I've tried to th:style tag and searched in google to find out how this tag works but unfortunately couldn't able to understand this tag properly.
I've added the code and the screenshot of the error.
blockquote class="imgur-embed-pub" lang="en" data-id="a/TOr6Nyn"><a >
href="//imgur.com/TOr6Nyn"></a></blockquote><script async
src="//s.imgur.com/min/embed.js" charset="utf-8"></script>
th:style="'background-image: url('+
#{~/frontend/images/blog/default/thum1.jpg}+')'"

You should add the style attribute to your div as:
style="background-image: url(<c:url value="/resources/images/bg_1.jpg"/>)"

I have also tried static image but it does not work.
But if u want to show image on page use base64 of that image.
Use this code on your thyme leaf page:
<img th:src="#{data:image/png;base64,YOUR BASE 64}

Static images not display with flying saucer and thymeleaf for generated pdf files

I am using thymeleaf as my template engin to map XHTML to HTML and flying saucer to generate a pdf file afterwards.
Now i failed to display my static images located at /src/main/resources/ inside y generated pdf file. The file itsself will be displayed fine only images disapear.
Even other locations like /src/main/resources/static or /src/main/resources/public didnt help.
My HTML / XHTML looks like:
<img src="images/logo_black.png"></img>
<img src="/images/logo_black.png"></img>
<img alt="mastercard" th:src="#{classpath:static/images/logo_black.png}" />
<div data-src="images/logo_black.png"></div>
<div data-src="/images/logo_black.png"></div>
<div data-src="#{classpath:static/images/logo_black.png}"></div>
none of them is working properly.
The Images itself are visible by localhost:8048/logo_black.png
I dont want to refer my images with a full url (http://...)

You can include resources from any URL (from the Internet or from your file system). Either way, there are several steps involved:
When generating the HTML from the Thymeleaf template, you can use
#{/some/url} to resolve a path relative to your Web context (assuming you have a Web context), or
#{classpath:/some/url} with will just leave the URL as classpath:/some/url, or
simply a string value constant or a value from a variable (${var}), doesn't matter if it's an absolute URL https://some/url or relative, Thymleaf will leave them unchanged in the resulting HTML.
Before you pass the HTML to Flying Saucer, make sure the URLs are correct. Then Flying Saucer will process all URLs with a UserAgentCallback, by default ITextUserAgent.
The relevant methods in UserAgentCallBack are resolveURI and setBaseURL.
There is some weird logic going on in the default resolveURI method of ITextUserAgent (inherited from NaiveUserAgent). If the baseURL is null, it will try to set it, so it's best to always set it yourself. I had better results with overriding the resolveURI, the following is enough to keep absolute URLs and resolve relative URLs relative to the baseURL:
#Override
public String resolveURI(String uri) {
if (URI(uri).isAbsolute())
return uri;
else
return Paths.get(getBaseURL(), uri).toUri().toString();
}
Finally, in order to resolve the classpath: protocol, you need to define an URLStreamHandler unless there is already one defined (for example, the embedded Tomcat of Spring Boot already does supports this).

You can render image with the help of base 64 .You just convert your image on base 64 and it will show on your web page as well as mobile view.The tags are:
<img th:src="#{data:image/png ;base64,your base 64}"/>

how to send parameters to jsp

So I'm using JFree chart and I'm trying to generate an image and display it in my jsp code. I would like to know how to accomplish this. I have tried multiple different ways but it doesn't work.
I saved the file and then when I try to access it. It is stored on the webserver and therefore I don't have the url to it?
Any help would be much appreciated.
I also tried to do something like this,
<IMG SRC="chart.jsp"
WIDTH="300" HEIGHT="300" BORDER="0" USEMAP="#chart">
which is basically jsp which generates an image. It works but how can pass parameters to it?

You shouldn't use a JSP, but a servlet to generate an image. JSPs are view components, whose role is to generate HTML markup from a model prepared by a controller.
But anyway, you pass parameters to a JSP the same way as you do for any other URL:
<img src="chart.jsp?param1=value1&param2=value2" .../>

Instead of thinking of the img source as static file think of the url being a stream that will be returned from a servlet using a prticular URL
eg
<img src="/jfreeServer?param1=123"/>

display image in jsp from path in struts2 action variable

i have a struts2 action which has a variable for an image which i want to display in a jsp page. when i display the value of the variable using the following:
<s:property value="variableName" />
i get the absolute path of the image file.
but when i try the following:
<img src='<s:property value="variableName" />' />
i get a blank there. i have even tried the following:
<img src="${variableName}" />
EDIT: i have done some thinking. the path of the image which is set is in temp folder of tomcat. is it because of that that i am unable to access it?
to no effect. what may be the issue in this?

Always keep in mind when doing web development what you have in server context and what travels to the client browser. If you do what you are suggesting, you will render and send to the client something like this:
<img src="c:\my_local_directory\some_image.jpg"></img>
Which means nothing to the client browser, which is surely executing in some other machine.
You should store your images somewhere where your application server can show them, and give always paths that are relative to your web application. For example, if you have stored some_image.jpg straight in your my-app.war file, something like:
<img src="/my-app/some_image.jpg"></img>
will always work. If you need to refine that image (imagine you need to put a watermark on it before) or need to recover its contents from somewhere (a BLOB in a database or something like that), you will need an entire new action in order to do it, for example:
<img src="/my-app/ImageAction.action?image=some_image"></img>

The src of the img tag must contain an absolute path, then only it can point to the image file from the client machine.
If the variableName contains an absolute path like this
http://localhost/images/pics/icon.gif
The img will finds the image from the server. Thus available always an hence you can use this.
<img src="${variableName}"/>
If the variableName is a relative path ie; something that's recognisable for the server.
/images/pics/icon.gif
The above path will be identified by the server but it wont be identified from the remote machine. In that case you need to have this
<img src="<c:url value=variableName/>" />

captcha image coming back a binary data? How to display this?

I am retrieving a captcha image from the Java based package "SimpleCaptcha"
On the front end I just put the following in my page and I get a captcha image:
<img src="stickyImg" />
I want to reload this captcha image onclick using javascript.
I tried:
$("#theclickhandler").click(function(){
$("#stickyImg").load('stickyImg', function(response){
$("#stickyImg").attr('src', response);
});
return false;
});
This gets the image but outputs something like this (greatly shortened obviously):
<img src="captcha image�PNG �ݚ��L�23U�݆�}$�J����Dy����IEND�B`� ">
That looks like raw, binary data to me. How do I get this to work?

The src attribute of an image tag specifies to the browser where the image to load is, not the content of the image. So you're stuffing the content of the image into the place where you want the location to be, and that's giving you garbage because it simply doesn't make sense.
So, to reload the image, you need to tell the browser that the address of the image has changed. It's not sufficient to simply rewrite the location in the image's src attribute to the same address -- that won't tell the browser to change anything. You can overcome this by stuffing some random data in the query string, say, the time of the request. Like #mikerobi suggests, you can just rewrite the src tag, here with the modification of putting a timestamp in the query string (which your servlet will almost surely ignore):
$('#stickyImg').attr('src', 'stickyImg?' + (new Date().getTime()));

You can't use that approach to load images, you need to set the image url attribute to the path of the image generator.
$('#stickImg').attr('src', 'path/to/image/generator');

I don't know how many browsers support it, but it's possible to base64 encode an image, prefix it with (depending on the image format) "data:image/png; base64,", and use that as a URI for the image.