Develop Reference

How to use Thymeleaf / Spring / Eclipse to show image by '<img th:src '

problem:
<img src="#{/images/0.jpg}" alt="error occured"/>
I am using Eclipse and folder images is in src/main/resources/static/images and Thymeleaf template which uses:
<img src="#{/images/0.jpg}" alt="error occured"/>
is in folder: src/main/resources/templates
The image is for example: 1.jpg

No, th:src is 'Thymeleaf Standard Dialect'. If your project is properly set up, spring/thymeleaf will be able to find your image on the webserver (e.g. Tomcat) by the given relative path itself. You do not need any own controller.
I hope this will help you: https://stackoverflow.com/a/29475520/9158389

How access uploaded file in spring framework

I am new to Spring framework in spring site There is tutorial at https://spring.io/guides/gs/uploading-files/ that upload file to the root folder "upload-dir" (this folder is beside src root folder)
questions:
How can I access and show image in browser (or access it in thymeleaf by th:src="#{}" syntax) -
by browsing to localhost:8080/files/first.jpg because of controller it give me download link.
should I always upload file to folder that beside src folder for example I want to upload file to "src/main/resources/static/file" is it possible?

When accessing files in your code, Spring will (by default) assume that the src/main/resources is the parent directory. If you are planning on accessing the files that are uploaded, then I would use src/main/resources (or a subdirectory of this location) as the upload path. This way, you can simply access them in Thymeleaf as such:
Location: src/main/resources/picture.jpg
Thymeleaf: th:src="#{picture.jpg}"
Or if the file exists in a subdirectory:
Location: src/main/resources/somedir/picture.jpg
Thymeleaf: th:src="#{somedir/picture.jpg}"
If you are storing the file(s) elsewhere, then you can also access them using various prefixes like classpath or file, i.e.:
classpath:com/myapp/config.xml
See more about Resources in Spring here:
http://docs.spring.io/spring/docs/current/spring-framework-reference/html/resources.html
Hope this helps!

My CSS doesn't show if i put my CSS folder inside the WEB-INF folder

I'm working in a Spring MVC project and I have the following problem:
This is my folders hierarchy
--src
--main
--webapp
--WEB-INF
--views
--css
--mystyle.css
---myview.html
and this is how I call mystyle.css in myview.html
href="css/mystyle.css"
but my CSS doesn't show up.
But if I put my views folder outside of WEB_INF, my CSS does show up and it works like this:
--src
--main
--webapp
--views
--css
--mystyle.css
--myview.html
--WEB-INF
And I call my CSS the same way like before href="css/mystyle.css"
Is there something different that I didn't notice? Why doesn't my CSS works outside of the WEB-INF folder and it does not work inside?

While it is true that you cannot access resources under WEB-INF folder directly, you can still keep your location and add a configuration like
<resources mapping="/css/**" location="/WEB-INF/views/css/" />
in your spring mvc configuration, or a java config equivalent if you're using java config. Note that you should be accessing css with an absolute URL, so if you're serving from root
href="/css/mystyle.css"
or prepand a context if you're using one

Right, CSS files need to be in a path that is directly visible to the browser. WEB-INF is hidden.

Relative URL to images in css (Zkoss)

I developed a component in ZK 7.0.0 with own molds, styles etc. The component should be build in one jar file, which I can copy in WEB-INF/lib folder to replace standart ZK components.
Folder structure:
src/
src/main/resources/web/images/
src/main/resources/web/js/
In ".css.dsp" files I use statements likes:
background-image:url(${c:encodeURL('/images/in2.png')}
And it's refer to 'domen/webapp/images/in2.png'. (physical path: /webapp/images/in2.png). But I need get images from jar file.
So how can I write relative path to images in css files?

You are faced with the case that is somewhat similar to this one.
To reference a URI that points to a file on the classpath you should use a special prefix ~./:
background-image:url(${c:encodeURL('~./images/in2.png')}
Some more details could be found in the docs for methods WebApp.getResource or Execution.locate.
Real world examples can be seen in ZK source files.

Linking Files And Directory Structuring

I'm working on a web project using java/ jsp/ servlets/ html/ css in eclipse tomcat, where everything is in the WebContent folder.
In my jsp files... When I try to include other jsp files (using a link like "/fileName.jsp" in jsp include directive) I can do that successfully.
But When I try to include image files (using a link like "/fileName.jpg" in the <img src=""> tag) nothing happens.
Nothing happens because instead of looking in the WebContent folder for image file it looks in the tomcat home directory, i.e.
Instead of looking at "http ://localhost:port/projectName/..." it looks at "http: //localhost:port/..."
Why does it look at the wrong location only with <img src=""> tags but not in <%# /> tag.
A workaround for this is that I start giving absolute paths "/projectName/..." However doing this means I'm hardcoding project name everywhere. This is what I do not want.

Don't include binary content in an ascii output. Why not just use the img tag? If you need to do something to produce a jpeg, I would use a Servlet.

Because the jsp-Links in the website are getting processed and the image links not. Either change the image path or develop an filter that changes the images'links.

Yes Templar, that could have been a way to solve my problem.
However, I simply changed the Context Root of my project from "Project Name" to "/" in Eclipse. This solved my problem.