Images by session or logged in user load and displayed fine but images from users other than session users won't get displayed. note: url for every images load just fine its just images aren't displayed.
Image controller:
def thumbphoto = {
response.setContentType('image/jpeg')
response.setHeader('Cache-control', 'no-cache')
if(params?.id != null && !(params?.id.empty)){
params.maxWidth?: 50.00
params.maxHeight?: 50.00
response.outputStream << imageProxyService.loadThumbnailImage(params.id, securityService.passwordEncoder(userId.toString()))
}
}
query for outputting image and slogan
def statusQuery = """SELECT c.user_account_id as userId, c.status_message as message, c.status_type as profile, se.id, se.photo FROM user_account se, status c
WHERE
c.user_account_id = se.id
GROUP BY se.id, c.user_account_id, c.status_message, c.status_type, se.photo"""
displaying images in gsp:
<g:each in="${statusList}" status="i" var="status" status="i">
<tr class="${(i % 2) == 0 ? 'odd' : 'even'}">
<tr>
<td>
<img id="profile_photo" src="${createLink(controller:'image', action:'thumbphoto', id:status.photo, params:[maxWidth:50.0,maxHeight:50.0])}" alt="" title="" />
</td>
<td>${status.id}: ${status.message}</td>
</tr>
You are overwriting id
id:status.photo and params:[id:status.id]
edit:
and not passing userId
try to create link and add userId in it:
<img id="profile_photo" src="${createLink(controller:'image', action:'thumbphoto', id:status.photo, params:[userId:status.userAccount.id, maxWidth:50.0,maxHeight:50.0])}" alt="" title="" />
Related
Using the following code I am trying to resize a image and to save it into a table into a VARBINARY(MAX) type field.
When I try to display the saved image, I get nothing on my screen...
When I try to decode manually the saved image using an online decoder, I get the following error :
"The MIME of file was detected as “application/octet-stream”, but the decoder displays it as “image/octet-stream”"
Please help me to save the image into table !
Thank you very much !
The sample below is based on :
https://www.prowaretech.com/Computer/Blazor/Examples/WebApi/UploadImages
and the online Base64 decoder I used is :
https://base64.guru/converter/decode/image
This is the code I am using :
#page "/TestBase64"
#using ResizeUploadImages.Shared
#using System.IO
#using System.Text;
#using System.Threading;
#using System.Threading.Tasks;
#using Microsoft.AspNetCore;
#inject HttpClient Http
#inject IJSRuntime JsRuntime
<table border="1" cellspacing="1" cellpadding="1">
<tr>
<td>
#foreach (var item in filesBase64_V1)
{
<tr>
<td style="text-align: center">
<h6> File Name : </h6>
<h6> "#item.fileName" </h6>
</td>
</tr>
<tr>
<td style="text-align: center">
<img src="data:#item.contentType;base64,#item.base64data" />
</td>
</tr>
}
</td>
</tr>
<tr>
<td>
<div class="custom-file" id="img_V1_div">
<InputFile id="inputFile_V1" class="custom-file-input" multiple="false" OnChange="OnChange" accept="image/png, image/jpeg, image/gif, image/bmp" />
<label class="custom-file-label" for="inputFile_V1">Choose file</label>
</div>
</td>
</tr>
</table>
#code {
List<ImageFile>
filesBase64_V1 = new List<ImageFile>();
async Task OnChange(InputFileChangeEventArgs e)
{
filesBase64_V1 = new List<ImageFile>(); // clear the list of files
var files = e.GetMultipleFiles(); // get the files selected by the users
foreach (var file in files)
{
var preview_file = await file.RequestImageFileAsync(file.ContentType, 250, 250); // resize the image file
var buffer_preview_file = new byte[preview_file.Size]; // allocate a buffer to fill with the file's data
using (var stream = preview_file.OpenReadStream())
{
await stream.ReadAsync(buffer_preview_file); // copy the stream to the buffer
}
filesBase64_V1.Add(new ImageFile { FileData=buffer_preview_file, base64data = Convert.ToBase64String(buffer_preview_file), contentType = file.ContentType, fileName = file.Name, IMAGE_IS_DISPLAYED = false }); // convert to a base64 string!!
await JsRuntime.InvokeVoidAsync("alert", $"{buffer_preview_file}");
//I am saving the two variables
// buffer_preview_file
// and
// base64data
// into a table into two VARBINARY(MAX) fields
// Each time when I try to load images from that table, I get nothing
// on my page
}
}
}
I'm trying to get pagination working in my joompla component admin page (table of records from database).
I'm using the standard method found on the net, so in my view class I have:
function display($tmpl=NULL)
{
$this->tabela = $this->get('Items');
$this->pagination = $this->get('Pagination');
$this->state = $this->get('State');
...
and then in my default template for this view:
<tfoot>
<tr>
<td colspan="7" >
<?php echo $this->pagination->getListFooter(); ?>
</td>
</tr>
but the pagination is not showing up. In the place where it should occur I can only see this (in website's HTML):
<div class="pagination pagination-toolbar">
<input type="hidden" name="limitstart" value="0">
</div>
How can I get this pagination work?
I have got webapp in spring 3 mvc. The case is that I have index page with url, when user click on them should be display another page with details of choosed information. Now the details page is shown but without any information (on index page is creating model with correct variable but not in details controller - in debug mode).
index controller method:
#RequestMapping(value="/{site}", method = RequestMethod.GET)
public String showDetails(#RequestParam(value = "site", required = true) String site, Model model){
Catalog product = catalogEndpoint.getByTitle(site);
model.addAttribute("product", product);
return "details";
}
index html:
<form action="#" th:object="${product}" method="post" th:action="#{/details}">
<table border="0" width="600" th:each="sb, poz : ${product}" >
<tr >
<td rowspan="3" width="20"><span th:text="${poz.count}"></span></td>
<td>
<a th:href="#{/details/(site=${sb.tytul})}" th:value="${site}"><span th:text="${sb.tytul}"></span></a>
</td>
</tr>
<tr >
<td><span th:text="${sb.adres}"></span></td>
</tr>
<tr>
<td>category:<b><span th:text="${sb.category.name}"></span></b></td>
</tr>
</table>
</form>
details controller method:
#RequestMapping(value = "details/{site}", method = RequestMethod.GET)
public String showHomePage(#PathVariable(value = "site") String site, Model model){
model.addAttribute("product");
return "details";
}
details html:
<form th:object="${product}" method="get" th:action="#{/details}">
<table border="1" width="600" >
<tr >
<td ><span th:text="${tytul}"></span></td>
<td>
<span th:text="${opis}"></span>
</td>
<td><span th:text="${adres}"></span></td>
</tr>
</table>
</form>
I don't have any ideas how to map the details site (I tried a lot of solution but nothing). Thanks for help.
With thymeleaf, using th:object, you need to reference the fields of that object with *{}
<form th:object="${product}" method="get" th:action="#{/details}">
<table border="1" width="600" >
<tr >
<td ><span th:text="*{tytul}"></span></td>
<td>
<span th:text="*{opis}"></span>
</td>
<td><span th:text="*{adres}"></span></td>
</tr>
</table>
</form>
assuming tytul, opis, and adres are fields of product. Unless it's a type, don't forget
Catalog product = catalogEndpoint.getByTitle(site);
model.addAttribute("product", product);
in your details controller method, otherwise you won't have a Catalog model attribute.
inside your details controller where are you setting product object in your model ?
model.addAttribute("product");
is just settingstring object "product", fetch the product object and set it in details controller like you have done in showDetails method
Change
model.addAttribute("product");
To
Catalog product = catalogEndpoint.getByTitle(site);
model.addAttribute("product", product);
in "showPage" method.
In grails, images url loads fine but image doesn't display...
def thumbphoto = {
response.setContentType('image/jpeg')
response.setHeader('Cache-control', 'no-cache')
if(params.id){
userId = params.id
}
if(params?.id != null && !(params?.id.empty)){
params.maxWidth?: 50.00
params.maxHeight?: 50.00
response.outputStream << imageProxyService.loadThumbnailImage(params.id, securityService.passwordEncoder(userId.toString()))
}
}
User has many images
This is the gsp view where i am trying to load and display images along with status updates.
<g:each in="${statusList}" status="i" var="status" status="i">
<tr class="${(i % 2) == 0 ? 'odd' : 'even'}">
<tr>
<td>
<g:if test="${status.photo != null && !(status.photo.empty)}" >
<img id="profile_photo" src="${createLink(controller:'image', action:'thumbphoto', id:status.photo, params:[maxWidth:50.0,maxHeight:50.0,id:status.id])}" alt="" title="" />
</g:if>
<g:else>
<img id="profile_photo" src="${resource(dir:'images', file:'no_image_blue.gif')}" alt="No Image" width="50" height="50"/>
</g:else>
</td>
<td>${status.id}: ${status.message}</td>
</tr>
</tr>
</g:each>
Install Firebug, and go to the Net tab.
You should see all the HTTP requests and their statuses.
You're likely get a 404 for your image, check its location under your webapps folder...
Again Firebug will give you all the hints and solutions.
Use g:img.
<g:img dir="/image/showImage/9921355add3b115766ad41effdf000db9e461570.jpg" alt=""/>
I have this foreach loop pulling images from my db :
`#foreach (var item in model)
<tr>
<td>
<img width="50" height="50" src="#Url.Action("GetImage", "Product", new { item.ProductId})"/>
</td>
...`
I tried to wrap it in an 'a' tag but all I get is 404's.
<img width="".../>
Any ideas?
an image with a hyperlink is what I'm trying to achieve. You click the
image and you're taken to the edit page.
Okay so suppose you get the image as shown in your question Product.GetImage and then the edit page is called by Product.Edit, you can have this:
<img src="#Url.Action("GetImage","Product")" />