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!!
Related
I followed this https://www.youtube.com/watch?v=aflTCbGdzDc tutorial, and I managed to include Jcrop in my laravel project, everything is working fine. I click on choose image, I crop the image, and the image is shown in the jcrop image box. but when I submit the form. I get the error in my validation that says, image is required ( i wrote a validation for my image file). why am I getting this error ??? the image is showing in that box. what am I doing wrong ? or is there a problem with JCrop ?!! please help me.
This is the image when I upload :
https://drive.google.com/open?id=1qgEmA9RlKy_eilZohCLajGmnVfqWSB9E
This is the image when I submit and I get the error : https://drive.google.com/open?id=1gSCurwZ50TF_nMZZcWnJ4keBsJmcQKEh
Template Code:
<form method="post" action="{{route('userRegister')}}" enctype="multipart/form-data">
#csrf
<div class="col-md-6 alert alert-danger {{!empty($errors->all()) ? 'show' : 'hide'}}">
<ul style="text-align: right;" dir="rtl">
#foreach($errors->all() as $error)
<li>{{$error}}</li>
#endforeach
</ul>
</div>
<div class="row col-md-12" dir="rtl">
<div class="input-group col-md-4">
<div class="container" dir="ltr">
<div id="userpic" class="userpic">
<div class="js-preview userpic__preview"></div>
<div class="btn btn-success js-fileapi-wrapper">
<div class="js-browse">
<span class="btn-txt">انتخاب عکس</span>
<input type="file" name="filedata" id="filedata" >
</div>
<div class="js-upload" style="display: none;">
<div class="progress progress-success"><div class="js-progress bar"></div></div>
<span class="btn-txt">در حال بارگذاری</span>
</div>
</div>
</div>
</div>
<div id="popup" class="popup" style="display: none">
<div class="popup__body"><div class="js-img"></div></div>
<div style="margin: 0 0 5px;text-align: center">
<div class="js-upload btn btn_browse btn_browse_small">بارگذاری</div>
</div>
</div>
</div>
</div>
Validation Code:
public function rules()
{
return [
'filedata' => 'required|max:1024',
];
}
public function messages()
{
return [
'filedata.max' => 'سایز تصویر نمیتواند بیش از 2 مگابایت باشد',
'filedata.required' => 'وارد کردن تصویر الزامی است',
];
}
I get this error in my console :
POST http://localhost:8000/server/ctrl.php?fileapi155834626282411 404 (Not Found) FileAPI.min.js:2
After talking to you in the comments, it would appear your getting 404 errors on the FileAPI javascript files.
You were using the following configuration for your FileAPI:
var FileAPI = { debug:true, media:true, staticPath:'{{asset('crop-userpic\FileAPI')}}' };
This was setting your staticPath to the /resources/assets/crop-userpic/FileAPI directory, which placed them outside of the webroot of your website.
You need to set the staticPath to the location of the FileAPI javascript files within your public directory so they can be accessed by jcrop.
Example Usage
<!-- include jquery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<!-- Set FileAPI settings -->
<script>
window.FileAPI = {
debug: false,
media: true,
staticPath: '/js/jquery.fileapi/FileAPI/'
};
</script>
<script src="/js/jquery.fileapi/FileAPI/FileAPI.min.js"></script>
<script src="/js/jquery.fileapi/FileAPI/FileAPI.exif.js"></script>
<script src="/js/jquery.fileapi/jquery.fileapi.min.js"></script>
<script src="/js/jcrop/jquery.Jcrop.min.js"></script>
In the above example staticPath is the path to the files FileAPI.min.js and FileAPI.exif.js.
You should make sure you have those files accessible from within the /public/js/jquery.fileapi/FileAPI/.
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'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.
I am trying to run my laravel project but it showing error that view not found.
My welcome.blade.php file is
#extends('layouts.default')
#section('content')
<div class="slider">
<div class="img-responsive">
<ul class="bxslider">
<li><img src="images/slider/1.jpg" alt=""/></li>
<li><img src="images/slider/2.jpg" alt=""/></li>
<li><img src="images/slider/3.jpg" alt=""/></li>
</ul>
</div>
</div>
<div class="container">
<div class="text-center">
<div class="wow bounceInDown" data-wow-offset="0" data-wow-delay="0.3s">
<h3>Providing Our Clients</h3>
</div>
<div class="wow bounceInDown" data-wow-offset="0" data-wow-delay="0.6s">
<h2>Best & Creative Solutions</h2>
</div>
</div>
</div>
#endsection
Updated
you can see error here
file structure see here
Okay just looked at your folder structure, rename your layout folder to "layouts". hope that helps.
I'm using a knockoutjs extension to place a loader on top of an element that is loaded from an ajax request so that a loading gif is show while the request is executing.
The fiddle is very basic:
It loads a list of avatars and shows the loading image while the ajax
request is executing.
Then, when you click an avatar, it's details
are loaded into another placeholder and a loading icon is also shown
while the request is executing.
The problem is, the very first time I click on an avatar, the loading icon isn't shown but all subsequential clicks works.
What am I missing here?
Thanks!
The issue that you are seeing is related to having both with and your custom binding on the same element. When the value is null, the with binding clears the child elements. This removes your loader (although it has already been copied off as part of the "template" used by the with binding), but it is put back when you populate infos. Having them on the same element also means that the bindings fires twice (once from changing infos and once from updating isAvatarLoading.
The easy way to fix this one is to split out the bindings like:
<div class="avatar" style="margin-left: 55px;" data-bind="loadingWhen: isAvatarLoading">
<div data-bind="with: infos">
<div data-bind="text: firstName"></div>
<div data-bind="text: lastName"></div>
<div data-bind="text: age"></div>
<div data-bind="text: description"></div>
<div style="margin-left: 55px;" id="" data-bind="with: image">
<img data-bind="attr: { src: Url }" />
<div data-bind="text: Description"></div>
</div>
</div>
</div>
If you don't want to add another element, then you could use the containerless with syntax like:
<div class="avatar" style="margin-left: 55px;" data-bind="loadingWhen: isAvatarLoading">
<!-- ko with: infos -->
<div data-bind="text: firstName"></div>
<div data-bind="text: lastName"></div>
<div data-bind="text: age"></div>
<div data-bind="text: description"></div>
<div style="margin-left: 55px;" id="" data-bind="with: image">
<img data-bind="attr: { src: Url }" />
<div data-bind="text: Description"></div>
</div>
<!-- /ko -->
</div>
Sample: http://fiddle.jshell.net/rniemeyer/75Lyn/