I'm including a separate JSP page (header.jsp) into my current home.jsp page as goes:
<jsp:include page='/WEB-INF/Header/header.jsp'/>
In that header.jsp page, I have an image as follows:
<img id="myImage" src="<c:url value='../Images/myImage.jpg'/>" />
But my image is not displaying on my home.jsp even though all the other elements (i.e. paragraphs, anchor links, etc.) found inside header.jsp is displaying normally on the home.jsp page as it should.
My folder structure goes:
MyProject
WebContent
WEB-INF
Header
header.jsp
Images
myImage.jpg
Views
Home
home.jsp
How do I specify the path file to my image (<img id="myImage" src="<c:url value='?/myImage.jpg'/>" />) from within my header.jsp file?
I seem to have it working:
img src="${pageContext.request.contextPath}/Images/myImage.jpg"
Please let me know if this is an ideal way to go about this in JSP.
Related
I'm trying to show an image into my jsp page. I've made sure that the path to the particular img is correct. I've tried all the different method below. and everything already point to the folder but on the page, it just showing a small x and not showing the picture.
<img src="<%=request.getContextPath()%>/poster/Capture.JPG" alt="capture_test">
<img src="poster/Capture.JPG" alt="capture_test">
<img src="WebContent/poster/Capture.JPG" alt="capture_test">
I've moved the folder one level deeper and it still does not work.
Any idea what am I doing wrong? Or is there a certain step to show it?
ps - edit
This is the file folder structure.
root is movie folder
movie -> build
-> poster
-> src
-> WebContent
-> META-INF
-> WEB-INF
-> all the different jsp files
You have to understand the difference between a local file system path, and the way the servlet container will translate an URL.
Your JSP will be transmitted to a client browser as an HTML page. The browser will find an <img> tag and will send another request to the server with the given URL.
The servlet container will then look for a servlet mapped to the url, or to a file under the root of the war and not at or below /WEB-INF.
So in your use case, the folder poster must reside under /WebContent, and the correct img src will be :
<img src="<%=request.getContextPath()%>/poster/Capture.JPG" alt="capture_test">
or
<img src="<c:url value="/poster/Capture.JPG"/>" alt="capture_test">
or
<c:url value="/poster/Capture.JPG" var="url"/>
<img src="${url}" alt="capture_test">`
Open the page in Chrome
Press F12 to open developer tools
Check the console tab
Chrome will show you the full and final URL where it is expecting
the image to be
I have a css file in my WEB-INF folder and in a jsp page i have given the location of the css file as :
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/WEB-INF/Tabs.css"
But the problem is it doesn't link with the css file. If i take out the css file from the WEB-INF, it works perfectly.
This is my first time working with css.
What seems to be the problem here ?
Thank you for your time.
The problem here is just as you describe it, the location of the css-file.
All resources located within the WEB-INF-folder is not reachable directly from the web browser, but has to be accessed through a servlet.
And this is the reason of why the css isn't loaded when you are visiting your jsp.
Try instead to put them in a more common structure such as /webapp/resources/css/Tabs.css and change the href to ${pageContext.request.contextPath}/webapp/resources/css/Tabs.css
**Edit **
The folder I refer to as webapp might have any name, but the location of it would be the parent folder of the WEB-INF folder.
I call an applet through a JSP...where I have to save it? and what the .class and the .java file? in which root in tomcat so when I call it from the JSP to be appeared?
here is the applet call from the jsp
%><%# page language="java"%>
<html>
<body>
<jsp:plugin code="g7appletDialog.class" codebase="" type="applet" width="300" height="200">
<jsp:fallback>Unable to load applet</jsp:fallback>
</jsp:plugin>
<applet code=""g7appletDialog.class"" width="300" heigjt="200"></applet>
</body>
</html><%
The path to your servlet must be relative to your jsp. If you have a jsp in web-inf/admin/pages/index.jsp, then you can place the .class file in directory web-inf/admin/pages/ and just have code="g7appletDialog.class".
In case that you have a central repository for applets, lets say web-inf/admin/applets then you should change the code to code="../applets/g7appletDialog.class".
The ../ gets you one dir back. To go two dirs back use ../../ and so on...
I have a String HTML content which is loaded into webEngine by loadContent() method. I have also some css and image files used in this page. Although I put these file into the same package of java class, the loaded page cannot find them. Looked for API docs and web, but could not find any appropiate similar solutions. How I load these files?
You can place your string html content in a file in the same package as the Java class and use the engine.load(String url) method instead:
engine.load(getClass().getResource("mypage.html").toExternalForm());
When you do this, all relative links in the html page will resolve to resources (e.g. css and image files) in your Java package.
Beware that if you are loading a resource that is located in a jar file, that the jar: protocol does not understand relative links with parent specifiers. E.g., <img src="../images/image.png"/> will not work, but <img src="/images/image.png"/> or <img src="images/image.png"/> will as long (as you put the image in the appropriate location in the jar file). The file: protocol does not have such restrictions and .. relative links will work fine when the resources are loaded using it.
If the html string is dynamically generated by your java code rather than static, then Sergey's solution is probably best.
You need to set your local paths in html string for loadContent next way:
view.getEngine().loadContent(
"<img src='" + getClass().getResource("1.jpg") + "' />");
I just found out that using the <base> tag in the HTML also does the trick:
<html>
<head>
<title>The slash at the end of the href is important!</title>
<base href="file:///absolute/path/to/your/docroot/" />
</head>
<body>
<img src="image.png"/>
</body>
</html>
If you load the above code via engine.loadContent(String) then image.png will be loaded from /absolute/path/to/your/docroot/image.png.
This method is easier if you need to load multiple resources since you only have to specify the absolute path at a single place.
This has been tested with WebView of Java 8u25.
Try this
<link href="file:css\default.css" rel="stylesheet" type="text/css" />
i am using<img src="../img/image.gif" /> to display the image on jsp but it show a smalll icon.
img folder are parallel to jsps folder
Directory structure:
WebContent
jsps
.jsp files
foo
img
images.gif
WEB-INF
Create a variable in your jsp that points to the context of your application
<c:set var="ctx" value="${pageContext.request.contextPath}" />
and use it to reference your images
<img src="${ctx}/images/theme/middle_banner.jpg" />