I'm uploading images to a folder productImages which is not in the src folder of spring boot project. I'm storing the paths of each image. How can i use th:src=#{product.image} to display the image where product.image is the path from database(e.g productImages/photo.jpg). My problem is getting the location to the folder.
As I understand it, you wish to specify server-relative links in Thymeleaf. (as opposed to context-relative). Basically, when you want to specify a resource outside of the application context, but relative to the server, you use the tilde notation. So, instead of:
th:src="#{/product.image}"
you should use:
th:src="#{~/product.image}"
You will find very nice clear & concrete examples with explanation at:
https://www.thymeleaf.org/doc/articles/standardurlsyntax.html.
Hope this helps! :)
Related
I'm relatively new to Laravel - building a basic website with it - and I'm unclear as to where I'm suppose to store images.
My instinct said /resources/images but that path doesn't exist like /js and /css do.
I read that /storage/app/public/images could be, but the answers I'm finding are inconclusive.
I understand the local may differ if they were uploaded through a GUI by an end-user vs by a developer who is creating a theme / template.
I'd like a citation to official documentation assuming one exists. Thank you!
I unintentionally discovered this Laravel official documentation which explains the purpose of each directory. In that it states the following:
This (/public) directory also houses your assets such as images, JavaScript, and CSS.
Based on the next quote it's implied the above is referring to images uploaded by the developer for the front end. Whereas the following explicitely states it's for user-generated files:
The /storage/app/public directory may be used to store user-generated files, such as profile avatars, that should be publicly accessible.
Earlier in the documentation is makes a subtle but, presumably, essential note:
By default, the public disk uses the local driver and stores these files in storage/app/public. To make them accessible from the web, you should create a symbolic link from public/storage to storage/app/public.
#techcyclist rightly referenced more official documentation about how to reference these in their respective locations. Such as files in the /storage this way, and the public directory this way. It also mentions advanced options for storage such as Amazon S3 under "Specifying a Disk".
Usually images are stored in public folder and you can easily access then with /img/somepic.jpg from anywhere in your project. Also you can store them in storage/images but then you need to use function for relative path to storage.
image does not exist in resources folder it exists in public folder
try like this, it will pick public folder default.
{{url('images/image_name')}}
I am trying to replace default favicon and main page svg.
I placed them in resources:
assets/img/my-logo.svg
favicon.ico
and in application.yml
spring.boot.admin.ui.brand: "<img src='assets/img/my-logo.svg'><span>MyBoot Monitor</span>"
Still its showing 404 error.
Update: I realize that favicon cant be replaced like that.. But, spring.boot.admin.ui.brand SHOULD WORK as mentioned in Reference.. Please help..
I have raised an issue here:
https://github.com/codecentric/spring-boot-admin/issues/903
Lets wait for the response :)
To replace the images, you need to place your images in the resources folder of your project. The folder structure needs to be "META-INF/spring-boot-admin-server-ui/assets/img", otherwise it will not work.
Here I have added a PNG file, but you can use any type of image file.
Then you need to add the properties in the application.yml.
You can file more details about the properties at http://codecentric.github.io/spring-boot-admin/2.0.2/#spring-boot-admin-server
I'm very new to spring boot and following Guru spring framework tutorial.
My simple spring boot application runs successfully and my controller works fine.
I have used thymeleaf to show html pages and used some bootstrap css.everything works fine but an image tag that I have in one of my html pages.
Thymeleaf shows the correct page when I run the app but image is not shown.I googled about this and put my images under /resources/static/images.This is my project structure :
I have also copied the same image to templates directory and used both files but none can be loaded.
This is my html file :
And this is what I get when I run the application :
404 not found error :
Can anyone tell me what I'm missing?
Try changing to
<img src="../static/images/pirate.jpg" width="1000" th:src="#{images/pirate.jpg}"/>
In img tag the attribute th:src's value is pointing to incorrect path, it should be th:src="#{images/pirates.jpg}" instead of th:src="#{../static/images/pirates.jpg}"
<img src="../static/images/pirates.jpg" width="1000"
th:src="#{images/pirates.jpg}"/>
Check the final path in the rendered HTML in browser by viewing the source
I had the same problem and when I remove leading slash it works
<img th:src="#{images/TacoCloud.png}" />
All the resources are stored in static folder and that is the default directory. You don't need to specify the relative path of the image you want to use. Just simply put the filename.
example
After using the following code I solved my error, You need to use src="#{/images/pirates.jpg}". instead of this src="#{images/pirates.jpg}"
Phew! Finally found the issue.
I finally discovered something fruitful about this issue after spending a whole goddamn day.
So here it goes:
Please put your images under this directory =>
resources/static/images/<your_image>
Now that you have put your image, it's time to source it from your tag in the HTML file. I personally was using Spring Boot's offering called thymleaf, so this answer will relate to that only.
The correct thymleaf file command for having an image is as follows:
<img width="40px" th:src="#{images/danceperf.jpg}" />
You don't need to put any other folder name as such expect parent folder of images. (Remember: You need to add one child folder to resources which will serve as a parent folder for images.)
After this, finally (this is important !) => Build your project and then start your spring boot app. The image should load just fine.
Hope this answer helps!
Use- img th:src="#{/images/TacoCloud.png}" ,
YES, this one is totally correct.
Add all of the WEB spring boot starters and also try for #RequestMapping instead of #GetMapping if it's ok.
The scenario
I have a script to upload a file to a directory and I need to return its path but without public/ prefix.
The upload destination is: public/uploads/, but I just need the uploads/ part.
The puzzle
I need public/ to upload the image because it is the physical directory which the image will be placed. So, how can I remove it (with a great approach) when I retrieve the path?
In practice
My final upload → /public/uploads/1.jpg
I want to retrieve → /uploads/1.jpg
Thoughts
I think I can remove the first part of the URL with the following snippet:
final_directory = directory.split('public/')[1]
But I don't feel comfortable by doing this.
Do you have anything better?
I think at the time of upload all files will be uploaded to the /public/uploads/ path.
When you fetch the file and show it, you can simply use the /uploads/ path. This is working for me.
I'm creating REST application based on spring and apache tiles. I've added .css file and on main page it work everything. I mean when I'm on domain.com/ but when I'll go to domain.com/something/ the url is the same and it's wrong. I would have to add ../ at the start of .css file path
How can I create (by auto) correct file path on every subpage ?
Use absolute paths rather than relative paths:
href="/css/someFile.css"
rather than
href="css/someFile.css"
You must also make sure that the web app's context path is always prepended, so the path should in fact be
href="${pageContext.request.contextPath}/css/someFile.css"
or, if you use the JSTL:
href="<c:url value='/css/someFile.css'/>"