I'm doing project with Spring Boot+Spring Data+Spring MVC.I want to show image from database to thymeleaf but image not displayed. This is my code
<span th:each="room,iterStat : ${room}">
<div class="col-md-3 md-col">
<div class="col-md">
<a href="single.html" class="compare-in"><img th:src="#{/static/images/${room.image}}" alt="" />
</a>
<div class="top-content">
<h5><tr th:text="${room.name}"></h5>
<div class="white">
<a th:href="#{/room/{id}/book(id=${room.id})}" class="hvr-shutter-in-vertical hvr-shutter-in-vertical2">BOOK</a>
<p class="dollar"><span class="in-dollar">$</span><span>2</span><span>0</span></p>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</span>
I save image with name image in database and i save image in folder ../static/images .. When I copy images name in database instead of ${room.image} , image will display..I don't know why
I've got the same issue, I get the issue resolved by doing this :--
<th:style="'background-image:url('+ ${room.image}+');'"></div>
Hope it helps.
Related
I'm very new to spring boot, and I have to do a proyect with Thymeleaf.
I can't figure out how to load the variable images from my folders.
<div class="row" th:fragment="searched-film">
<div class="card m-2" style="width: 12rem;" th:each="film : ${films}">
<img alt="Póster de la película" class="card-img-top p-3"
th:src="#{${'./static/images/peliculas/' + film.poster}}">
<div class="card-body">
<h5 class="card-title" th:text="${film.title}"></h5> <h6 class="card-title"
th:text="'(' + *{film.year} + ')'"></h6>
</div>
</div>
</div>
Title and the year works, but images dont load.
the files are in 'FilmoTokio\src\main\resources\static\images\peliculas', meanwhile this html in 'FilmoTokio\src\main\resources\templates'
This is the github: FilmoTokio
I tried to change the link, I used th:hrc, I changed the folder's name...
can anyone help me, why my image won't load ?
<div class="card" v-for="movie in movies_trend" v-bind:key="movie.id" >
<div :class="['card-movie', movie.page]" :movie="movie.name">
<img :src="'../src/assets/image/kimi-no-na-wa-poster.jpg'+movie.poster" class="card-img-top" :alt="movie.name">
</div>
</div>
This is my dir
<div class="card" v-for="movie in movies_trend" v-bind:key="movie.id" >
<div :class="['card-movie', movie.page]" :movie="movie.name">
<img :src="movie.poster" class="card-img-top" :alt="movie.name">
</div>
</div>
your path of an image can be added to movie.poster
so your movie.poster will contain value '../src/assets/image/kimi-no-na-wa-poster.jpg'
you can add image tag in the following way also
<img :src="'../src/assets/image/'+ ${movie.poster}" class="card-img-top" :alt="movie.name"/>
In this case, your variable movie.poster will container only the name of image kimi-no-na-wa-poster.jpg
When I get the picture from the url, I can put it on my site, but I cannot upload it from my pc.
Can you explain to me how Laravel uses src?
<div class="card bg-dark text-white">
<img src=" /img/manzara.jpg " class="card-img" alt="...">
<div class="card-img-overlay">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text">Last updated 3 mins ago</p>
</div>
If the image is the public folder, change your tag as below:
<img src="{{asset('/img/manzara.jpg')}}" class="card-img" alt="...">
I'm doing Spring project use Spring Boot, Spring MVC, Spring Data. Now I have a problem maybe with thymeleaf
This is my index page
Logo Bonfire and room picture is image and save in folder src/main/resource/static/images in eclipse .
When I use Search function, it will display Search page like this picture
I don't know why it's not display logo image and room image although I use one template for my index page and search page... And it's still happened with detail page too, images is not displayed. Only index page displayed images
I think the problem is not by code... I don't know why
This is my room.html (index page and search page)
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="Header :: head">
</head>
<body>
<div th:replace="Header :: header" class="header"></div>
<div class="container">
<div class="products">
<h2 class=" products-in">AVAILABLE ROOM</h2>
<div class=" top-products">
<span th:each="room,iterStat : ${room}">
<div class="col-md-3 md-col">
<div class="col-md">
<a th:href="#{/room/{id}/detail(id=${room.id})}" class="compare-in"><img th:src="#{'images/'+${room.image}}" alt="" />
</a>
<div class="top-content">
<h5><a th:href="#{/room/{id}/detail(id=${room.id})}"><tr th:text="${room.name}"></a></h5>
<div class="white">
<a th:href="#{/room/{id}/book(id=${room.id})}" class="hvr-shutter-in-vertical hvr-shutter-in-vertical2">BOOK</a>
<p class="dollar"><span class="in-dollar">$</span><span>2</span><span>0</span></p>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</span>
<div class="clearfix"></div>
</div>
</div>
</div>
<div th:replace="Header :: footer" class="footer"></div>
</body>
</html>
Pleased help me
Use this approach to set the image :--
<div th:style="'background-image:url('+ ${room.image}+');'"></div>
Use something like this.
<img th:src="${'images/'+ room.image}" />
I have uploaded some images and it got saved into a directory in this path:
C:\Users\user\Inoesis Spring Projects.metadata.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\HDTS/photos.
I have uploaded some images and it got saved into a directory in this path:
C:\Users\user\Inoesis Spring Projects\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\HDTS/photos. Handler method in the Controller:
#RequestMapping(value={"/", "home"})
public ModelAndView showIndex(){
return new ModelAndView("index", "artistList", artistService.getArtistsByLikes());
}
view : index.jsp
<c:if test="${not empty artistList }">
<c:forEach items="${artistList }" var="artistInfo">
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"> <span class="glyphicon glyphicon-user"></span> <c:out value="${ artistInfo.stageName}"/> </h3>
</div>
<div class="panel-body">
<img alt="" src="<%=request.getContextPath()%>/photos/${artistInfo.photoName}">
</div><!-- /.panel-body -->
</div><!-- /.panel panel-primary -->
</div><!-- /.col-md-4 -->
</c:forEach>
</c:if>
Pls note my project is HDTS.
How do i display them on a jsp page.
thanks
Pls note my project is HDTS.
How do i display them on a jsp page.
thanks
You can send the uploaded image name to the requested page and use the getContextPath() defined in HttpServletRequest to get complete URL to uploaded image.
<%=request.getContextPath()%> will give /wtpwebapps/HDTS
So your <img /> should look like :
<img src="<%=request.getContextPath()%>/photos/${image_name}"/>
Hope this helps.
Happy Coding! Cheers!!