I am developing a shopping cart in Sprng MVC from where seller can upload products image with its description. I am able to upload images to webapp/resources/images folder. now I have to load all these images to dashboard page (home page) when any user open my site. I am not able to load these images from this location.
In my jsp I am writing final code like this:
<img src="resources/images/product1.jpg"/>
how can I add this folder to classpath so it'll be available. I am using Spring MVC and MAVEN.
Please let me know how to achieve this.
With Expression Language (EL) in JSP:
<img src="${pageContext.request.contextPath}/resources/images/product1.jpg"/>
As I understand, you have uploaded your images to a separate folder on your server and you want to include the folder in the classpath to retrieve and show the images on your JSP.
In Spring MVC, you can force the use of the absolute path (relative to the root of the system) by prefixing 'file:' with the URL resource:
// actual context type doesn't matter, the Resource will always be UrlResource`
ctx.getResource("file:/root/webapp/resources/images");
or
// force this FileSystemXmlApplicationContext to load its definition via a UrlResource`
ApplicationContext ctx =
new FileSystemXmlApplicationContext("file:/root/webapp/resources/images");`
This is one way of adding your image directory by specifying the absolute URL.
If you have your image directory relative to your current directory and want to add to your class path, then the following ways will work:
ApplicationContext ctx =
new FileSystemXmlApplicationContext("resources/images");
This works relative to the current working directory.The images will be loaded from a filesystem location, in this case relative to the current working directory. so, we have added the directory to classpath. In the same way, you can make the classpath configuration in your XML as well.
<mvc:resources mapping="/resources/**"
location="classpath:resources/images"
cache-period="10000" />
or
<mvc:resources mapping="/resources/**"
location="file:/root/webapp/resources/images"
cache-period="10000" />
we will be able to retrieve the images now in your JSP as follows
<img src="${pageContext.request.contextPath}/resources/images/user.jpg"/>
The above EL ${pageContext.request.contextPath} ensures that the Context is always prepended.
Note: In Spring 3.2.2, the Context path is prepended automatically if not present.
I am able to fix this problem:
Added the following resources declaration to Spring configuration
<resources mapping="/resources/**" location="/resources/" />
and in jsp
<img src="<c:url value="/resources/images/product1.jpg" />" alt="" />
Thanks guys for your all help, your direction really helped me to get the answer for this problem.
Related
I have currently a problem with the Tomcat configuration of a web application (I use Tomcat 8.5.57).
This web application is packaged in a war file containing, among others, html files and css files.
This application works well.
Now, I have a request from a customer asking to be able to modify the look and feel of the application from outside of the war via a custom css file managed by the client (used to set the logo of the client or stuff like that).
So I tried to create a custom context file, called custom.xml, that I placed in tomcat\conf\Catalina\localhost directory.
This file looks like :
<Context docBase="E:/somedirectory/support"
path="/app/css"
reloadable = "false"
unpackWAR = "false"
swallowOutput = "true" >
<WatchedResource>custom.css</WatchedResource>
</Context>
I put the custom.css file containing some css instructions as test in the E:/somedirectory/support directory.
In the html file of my web application, I have the following line in the head section :
<link rel="stylesheet" href="css/custom.css" media="screen" type="text/css"/>
The problem is that my custom.css file is never taken into account.
When I open the Sources tab of Chrome's developer tools, I see a custom.css file in the hierarchy in app/css as expected (probably due to the line in the html file), but it is hopelessly empty.
I tried a lot of things found on the Web and on stackoverflow, but nothing worked for me...
Can someone help me ?
Thank you !
The path attribute of <Context> element is ignored outside of server.xml:
This attribute must only be used when statically defining a Context in server.xml. In all other circumstances, the path will be inferred from the filenames used for either the .xml context file or the docBase. [from Tomcat documentation]
Therefore you have two choices:
You can define a new context (new web application) with context path /app/css by creating a file named conf\Catalina\localhost\app#css.xml and content:
<Context docBase="E:\somedirectory\support" />
This way everything under the /app/css subtree will only be served from the E:\somedirectory\support directory.
You can redefine your application context to include an additional virtual directory (beside the contents of the WAR file) by adding a file named conf\Catalina\localhost\app.xml with content:
<Context>
<Resources>
<PreResources className="org.apache.catalina.webresources.DirResourceSet"
base="E:\somedirectory\support"
webAppMount="/css" />
</Resources>
</Context>
This way, while serving a request for /app/css/foo/bar, Tomcat will first look for foo/bar in E:\somedirectory\support and then in the WAR file.
I want to create a custom JSP tag as follows.
<ng:template src="../js/Rule/templates/rule-list.jsp" />
Which will actually include the file "../js/Rule/templates/rule-list.jsp" inside a scripts tag and generate HTML as follows.
<script type="text/ng-template" id="../js/Rule/templates/rule-list.jsp">
Content of ../js/Rule/templates/rule-list.jsp file
</script>
So far I have creates following tagfile.
<%# attribute name="src" required="true" rtexprvalue="true" %>
<script type="text/ng-template" id="${src}">
<%# include file="${src}" %>
</script>
Which is giving this error
File "${src}" not found
Means its trying to include the ${src} instated of its value. Can any one suggest how to include file in tag file from specified attribute value?
Note: I am using angularjs. I want to load angularjs templates without ajax call. Because my browser is not able to load ng-template with AJAX call for cross domain call problem.
Got it. I need to use dynamic include as
<jsp:include page="${src}" />
This is working fine.
WEB-INF directory is a special directory that is not part of the public directory tree of your web (Servlet) application.
The Servlet Specification states (page 70 or so):
A special directory exists within the application hierarchy named
“WEB-INF”. This directory contains all things related to the
application that aren’t in the document root of the application. The
WEB-INF node is not part of the public document tree of the
application. No file contained in the WEB-INF directory may be served
directly to a client by the container. However, the contents of the
WEB-INF directory are visible to servlet code using the getResource and
getResourceAsStream method calls on the ServletContext, and may be
exposed using the RequestDispatcher calls.
AngularJS cannot see any folder inside your web application WEB-INF folder since it has no "connection" to it.
You will have to add those template files in a public folder, view-able by your Angular template files.
I'm making a java web app, and I want it to display an image. However, it doesn´t find my image.
I've made a folder in /src/main/resources/images
Also, in the .jsp file, I´ve tried with the following sentences.
<img src="/src/main/resources/images/Head.png"> </img>
<img src="< c:url value='/src/main/resources/images/Head.png'/>"> </img>
Is there anything bad I'm doing?
Thanks
Edit:
The path of mi .jsp file is /src/main/webapp/WEB-INF/jsp/welcome.jsp
You can find the web app code in https://github.com/Santi-7/hello
Your app is a Spring Boot app. I think that you can also try to use the facilities provided by Spring Boot for serving static content. Anyway, you are doing it right now because you are using webjars for css and js libs!!! Be consistent with the tech that you are using.
The structure of a .war file is as follows:
/
/WEB-INF
/lib
/classes
/META-INF
Now, your application has the following structure (I assume, given the folder structure, you are using Maven)
/
/src
/main
/java
/resources
/webapp
Now, the Maven war plugin will copy everything in the classpath to /WEB-INF/classes during compilation - this is /src/main/java and /src/main/resources by default.
The crux of the matter is that nothing under /WEB-INF or /META-INF can be accessed by requests - this is for security as otherwise someone could simply download /WEB-INF/web.xml for example.
So, in order to add a resource that is accessible by a browser, you need to place it into /src/main/webapp - this will become the root of the application.
So if you place Head.png into /src/main/webapp/images then in the JSP you would use:
<c:url value='/images/Head.png'/>
In short, you need to read up on how the directory structure of a .war works and how that relates to your code.
The path to the image must be relative to the path to the .jsp file.
Because the path to your image is: /src/main/resources/images/Head.png, and the path to your jsp file is: /src/main/webapp/WEB-INF/jsp/welcome.jsp, in your image tag you need to write:
<img src="../../../resources/images/Head.png" />
The ../../../ is for getting out from the jsp folder to the main folder, and the resources/images/Head.png is the path from the main folder to the image.
Thanks everybody, i could resolve my problem.
Changes I made:
So, in order to add a resource that is accessible by a browser, you need to place it into /src/main/webapp - this will become the root of the application.
Now, my images are in /src/main/webapp/images.
The path to the image must be relative to the path to the .jsp file.
Now, the sentence of my .jsp file is
<img src="images/Head.png" />
Edit [1]:
¡ I made a mistake. The path to the image is relative to the /webapp classpath !
I am trying to display an image on a jsp.
My image file is located at
MyApp/WebContent/images/logo.jpg
And my JSP pages are located at
MyApp/WebContent/WEB-INF/view/home.jsp
I have already tried to use the image by
<'img src="<%=request.getContextPath()%>/images/logo.jpg" />
and
<'img src="<'c:url value='<%=request.getContextPath()%>/images/logo.jpg'></c:url></img>
Is this issue something because of my location hierarchy where I have placed my image?
Really appreciate your help. Thank you.
UPDATE:
I've found the solution to my problem in:
http://www.tutorialspoint.com/spring/spring_static_pages_example.htm
I just have to use resource mapping in my servlet.xml.
I really appreciate all of your kind answers. :)
Any static resource is also look for a URL Mapping in spring mvc, so static resources should be defined in the springmvc-servlet.xml.
Add the following entry to your MVC configuration. I assume that your static files in resources folder.
<mvc:resources mapping="/resources/**" location="/resources/" />
then static files can be accessible from the page.
<img src="/resources/images/logo.jpg" />
To avoid to have to indicate explicitly the context path you can use jstl core and do it like that
<img src="<c:url value="/images/logo.jpg"/>"/>
You can also check this thread about spring ressource and path
Spring 3 MVC resources and tag <mvc:resources />
try
<img src="/MyApp/WebContent/images/logo.jpg" />
Even though it is a Spring MVC app, it should still deploy as a normal webapp. Check your deployment to make sure, and also use the browser to test loading.
To make it work I had to do
in spring config:
<mvc:resources mapping="/resources/**" location="/resources/" />
In JSP:
<spring:url value="/resources/images" var="images" />
<img src="${images}/back.png"/>
TRY THIS !
ALWAYS WORKS FINE !
Create your img folder at src/main/resources
Copy the picture inside this folder called "img"
Write inside
Use this picture inside
check the screenshots and enjoy !
I put images folder under WEB-INF directory, after did fully configuration in the spring-dispatcher-servlet.xml file, I used this img src:< img src="projectname/../images/logo.jpg" /> in my jsp page, images display finally.
in springmvc-servlet.xml you should add <mvc:resources location="/WEB-INF/images/" mapping="/images/**" /> and in jsp <img src="images/logo.jpg" /> and you should create a folder under web-inf which is named images and in the web.xml your servlet mapping shoul be like that <url-pattern>/</url-pattern>.
I'm developing locally using both jetty and tomcat.
My images, css, javascript files are in:
/src/main/webapp/assets
where the folder assets has:
/src/main/webapp//assets/images
/src/main/webapp//assets/css
/src/main/webapp//assets/images/
My spring config file has:
<mvc:resources mapping="/assets/**" location="/" />
I'm confused as to what both mapping and location mean?
I think mapping means that that spring will only try and serve the static files if it has the url with the pattern like:
www.example.com/assets/
What does location do?
My html currently has:
src="/assets/images/logo.gif"
I've tried playing with the location value, and I don't get to render the image for some reason.
Can someone clear this up for me?
If your project structure has /src/main/webapp/assets/images, then you want to use:
<mvc:resources mapping="/assets/**" location="/assets/" />
and then in your JSP reference files as
src="${pageContext.request.contextPath}/assets/images/logo.gif"
Its more common to have a project structure like /src/main/webapp/images|css|js and then use:
<mvc:resources mapping="/assets/**" location="/" />
but still keeping URLs as ${pageContext.request.contextPath}/assets/images/logo.gif