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/>" />
Related
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}"/>
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¶m2=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"/>
I am developing a web page in which I have to upload multiple files on
a single browse.
I am using html <input id="filelist" type="file" multiple=multiple>
This enables the multiple file selection and also retrieves the
full file path of all the selected file, which shows in file
upload text area.
<script language="JavaScript">
<!--
function showname(){
var filepath = document.form1.filelist.value ;
alert(filepath); //this shows only first filename among selected file
}
-->
</script>
But the problem is when I get the value of input, it returns only the first file
name among selected files.
Now how can I get the file paths which is shown in file upload text area.
Thanks!
This is browser specific. So you might be running this in a browser that doesn't support this. For example Firefox does. Here's an example of how to use this feature:
http://hacks.mozilla.org/2009/12/multiple-file-input-in-firefox-3-6/
I would consider using http://www.uploadify.com/about/ or http://www.fyneworks.com/jquery/multiple-file-upload/. They should help you out, and also add some cool features to your file upload form.
File paths are deliberately hidden from the page for security purposes. To look at the local filesystem you need to use Java, Active-x (meh), or Flash.
I want to render content that i have created locally using html component and put image in this html also by putting image in res folder in jar, i tried
<img src='images/down.png'></img>
<img src='res/images/down.png'></img>
<img src='./images/down.png'></img>
but nothing worked, any suggestion?
[EDIT]
here is my code, i have no idea how to implement DocumentRequestHandler that is why i used DefaultDocumentRequestHandler
DocumentRequestHandler handler = new DefaultDocumentRequestHandler();
HTMLComponent component = new HTMLComponent(handler);
component.getStyle().setBorder(Border.createLineBorder(1));
component.getSelectedStyle().setBorder(Border.createLineBorder(1));
component.setBodyText("<div><b>nirmal:</b>" +
"<img src='res://images/down.png' /></div>");
tried res://images/down.png but nor worked
my image is in res/images
You need to explain how you loaded the HTML, images are loaded relatively to the base URL so you need to define the base URL when creating the HTML (its implicitly detected when loading via URL).
If you created the HTML via setHTML(String) then you need to give absolute paths depending on your DocumentRequestHandler implementation e.g. res://myImage.png or file://myImage.png .
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.