Display image using JSF from tomcat folder - jsf-2

Hi I am trying to display image which I have stored in my tomcat's webapps folder
i.e(/webapps/test_Proj/images)
in this way.
<h:graphicImage value="/images/#{backBean.obj.image}" />
When I am trying to see it in Mozilla debug mode, it's showing me error as
'failed to load given url'
it is also showing correct path as
/test_proj/images/sample.png
where my images are stored
What I am missing here ?
How should I overcome with this problem?

Not sure if this has to be called dirty work or a hack... but it works :)
In server.xml, place the below content.
<Context path="/YourContextName/images" docBase="D:/Servers/Tomcat/images" />
For eg., I have created HelloWorld.war. So for YourContextName I have given the value HelloWorld.
I have placed all my images which I want to render under D:/Servers/Tomcat/images.
When you start your server, make sure you can access your images by typing below path.
http://localhost:8080/HelloWorld/images/SampleScreenShot.JPG
And finally in your facelets page,
<h:graphicImage value="/images/SampleScreenShot.JPG"></h:graphicImage>
Remember Context path is added automatically. So above code would result in
http://localhost:8080/HelloWorld/images/SampleScreenShot.JPG

Related

Trying to force a refresh of most up to date image, after new image uploaded, using MVC3/Razor?

I am using MVC3, Razor, C#, EF4.1, MSSQL2008
I have implemented a mechanism to upload files to a web server "Uploads" folder.
The issue I have is that when the user is returned to the "Upload" view, the image is still the old one. This may be linked to the fact that I am using the PK of the User's Organisation as the filename ie 100.png. So swapping the image will produce another 100.png, ie overwrite the original. This prevents lots of rubbish files if I used a GUID instead. However the browser thinks nothing has changed so loads it, I guess, out of cache.
My razor code is:
if (File.Exists(Server.MapPath("~/Uploads/" + strImageFileName)))
{
<p><img alt="Current Image" src="#Href("~/Uploads/" + strImageFileName)"/> </p>
}
else
{
<p><img alt="Current Image" src="#Href("~/Uploads/NoImageFile.png")"/> </p>
}
If I get this issue, then a Shift Refresh usually does the job, although I would like this to be automatic. Is there a way to force a refresh, via code, so the newest Image is always shown. We did seem to have more issues with Chrome for some reason.
Thoughts?
Thanks in advance.
Changing the url referenced by the link seems to be a lightweight solution over using AJAX.
http://www.immense.net/force-update-cached-files-images-favicon/
by adding something arbitrary like a version number. The browser will update the cashed image with the current version.
<img alt="Current Image" src="#Href("~/Uploads/" + strImageFileName + Version )"
you might want to use an action to return the image over a direct url to the image. If you are not already doing so.

Rotativa / Wkhtmltopdf images not displaying

I am currently creating an MVC 4 web application.
I have an action that has a base background image which is always the same then an arrow image which changes in degrees depending on the information that is collected within the action.
I call this action using
<img src="#Url.Action("trend-image", "NonReg_Reports")" alt="background" width="245" height="105" />
This works fine when it is called and is just displaying a HTML webpage. It gives me the HTML.
<img src="/nonreg-report/01495344/trend-image" alt="background" width="245" height="105">
I am then using Rotativa / Wkhtmltopdf to convert this HTML page into a PDF. This runs the same piece of code as above.
The problem is I am just getting a white box with the alternative text in it if I use the code above.
If I use <img src="~/Content/images/trend_back_medium.png" alt="astuff" /> which is the actual background image in my project it works fine.
The image from the code above can not be saved anywhere due to how it is used. I am thinking that it is a path problem, but after trying lots of different things I can still not get it to work.
Any suggestions or help would be greatly appreciated Thank you.
I had the same problem. Normal html view was ok with pictures, pdf was not display it. I used Server.MapPath to point to picture and it was ok...
<img src="#Server.MapPath("~/Folder/SubFolder/Subfolder/ImageName.png")" />
I hope this will help
Adam
I faced the same problem and I found a workaround, not a nice one, but it suits my needs.
It seems that Rotativa(Wkhtmltopdf?) have a problem with images which are returned from http handler (at least my case). So to handle this situation, in controller action before return new ViewAsPdf... my code manually save file to some local 'temp' folder and replace 'src' of images in rendered view with paths to that local files in server path manner, eg: http://localhost/img/temp/trend-image.png.
This is not a nice solution, if you already found better one, let me know.
Adding the attribute [System.Web.Mvc.AllowAnonymous] to the controller method returning the image solved the problem for me.
It seems to work okay via css...
I was trying to display a logo at the top of the page and switched it with a div and set the height and width to that of the image.
CSS:
div.logo {
background-image: url("/images/logo/logo.png");
height: 53px;
width: 185px;
}
HTML:
<div class="logo"></div>
I found that with my pages, the images were not showing because they were .gif files.
Rotativa can have problems with gifs.
When I changed the images to .jpg or .png everything worked well.
I think it might come down to basically the ".png" bit being missing.
You could add a mapping like this /nonreg-report/01495344/trend-image.png ยป /nonreg-report/01495344/trend-image and have both of the urls active, why not? That way wkhtmltopdf is fooled and you still have your dynamic image without saving it anywhere on disk. Dynamic urls can work, I do that for live-converting gif2png for wkhtmltopdf.
Also it might help to have an absolute url, which I think you can do with something like this:
src="#Url.Action("trend-image", "NonReg_Reports", null, Request.Url.Scheme)"
If you are specifiying height and width then make sure you should write it in style tag
like <some-tag style="height: 100px; width:100px">

struts2. add path to url

I'm working with struts2.
An external app calls to my app with url
http://localhost:8080/present/jsp/mi.action?cod=02021
But because of my JSP file system, my action result is in
http://localhost:8080/present/jsp/ALTE/mi.action?cod=02021
(note the difference in ALTE).
The JSP has some lines as
<%# include file="../comuns/comunCssyJs.jsp"%>
The first ../ is to go out ALTE.
If I access with first link the page is loaded but no include files are found. However, with second link there is no problem.
Does someone know what can I do? I know I can change my JSP-s dir-s, but I'd prefer to "add automatically" the ALTE path to the url. is that possible?
Thanks in advance.
Jon
Use Struts2 <s:include> tag http://struts.apache.org/2.x/docs/include.html with <s:url> tag http://struts.apache.org/2.x/docs/url.html.

dynamically load image names from database and display them using jsf 2.0

i'm trying to find a solution to load image names from a database and display them on a webpage.
Basically, when i display an image i do it like this:
<h:graphicImage value="#{resource['mywebapp:image.png']}">
</h:graphicImage>
So now instead of image.png i would like to dynamically load alternative images. Problem is, that i can't use an EL nested expression inside another one (at least i have not found out how). To put the logic into the backing bean also does not help in this case, because then it is rendered like that:
<img src="#{resource['mywebapp:somedynamicallyloadedimagename.png']}">
</img>
The only thing that works, is to directly generate the path in the backing bean:
public String getImage() {
this.image = "/mywebapp/javax.faces.resource/"+this.image+".jsf?ln=images";
return image;
}
However this "solution" is far from elegant, since everything is hardcoded and this is nothing i'm going to put in a production app.
What would be a good solution to do this? I would like to avoid putting the images into the database and using primefaces..
Since i'm not an experienced JSF coder (as you can probably tell), i would highly appreciate some thoughts on this topic...thanks in advance!
Try
<h:graphicImage library="images" name="#{generated.name}" />

How to disply images in grails which is stored out-side of the grails project

i'm using grails file uploader plugin to upload image file to specific location in my local machine, and also i'm able to download it from the same location,
but my problem is, i'm not able to display tht image in my gsp file.
i'e in img tag if i give the src of tht image file which is outside the grails project.
it displays only the images which is inside the project. is it possible to display images in that way ( without the help of domain class )
Build a controller that has a single action, say 'image', that takes the path as the parameter (or id is better) and then just output that file from disk and set-header content-type correctly and you can just use:
<img src='${linkTo(controller: "image", action: "image", id: myId")}' alt="My pic" />

Resources