I am new to this area, I have added a number of images to gridfs. Now i want to display all these images on html page. I have retrieved the images from mongodb using the following code.
Query query = new Query(where("filename").is("file"));
List<GridFSDBFile> images = gridFsTemplate.find(query);
model.addAttribute("images",images");
It gives me all the images, now i have no idea how to display these images on html page. i am using velocity template.
#foreach($image in $images)
//code for image
#end
Outputting GridFSDBFile type of objects in velocity template does not make sense. You should rather output the URL to the iamge, like
#foreach($imageId in $imageIds)
<img src="getImageFromGridFs?id=$imageId">
#end
and then create a getImageFromGridFs Servlet (or relevant Server Side code) to fetch the corresponding image and stream it to the Servlet's OutputStream.
After fetching the image from GridFs, You can access the image data in the Servlet using GridFSDBFile.getInputStream()
Hope this helps.
Related
I am building an application, on the front end there is there are a few fields, including a rich text editor (react-quill) that can take in an image. I have saved the values from the first page and displayed them back to the user for confirmation. In order to do so I used local storage in the form of formData as shown below
formData = {"questionTitle": "Here is a test field",
"questDesc": "<p>Here is the Image <img src=\"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcU.. />” }
My problem is after confirmation, I am trying to push the formData to MongoDB but I need to save the image (in cloudinary) separately from the database. How do I send the image to Cloudinary and instead save the URL in the MongoDB at the exact position that was inserted in react-quill?
I want to know if there is a better solution to my problem. Currently, the image is in base64 in local storage, is there a way to just refer to the route of the image while in local storage, and push it to the cloudinary after confirming? All pointers, and suggestions welcome!!
In angular2 using aberezkin/ng2-image-upload
I have in my template
<image-upload
[max]="1"
[url]="uploadUrl"
[preview]="true"
[buttonCaption]="'Select Images!'"
[dropBoxMessage]="'Drop your images here!'"
(onFileUploadFinish)="imageUploaded($event)"
(onRemove)="imageRemoved($event)"
(isPending)="disableSendButton($event)"
></image-upload>
This is part of a larger form for an e-commerce site's product capture/edit screen including this image upload
It's all great for a new product and a new image but if I have to edit an existing product and thus have the data from the server for that product, including the image, how can I pre-populate image-upload with this image thus allowing a user to keep it or delete it/change it?
Also is there a way to filter file type allowed?
So you want to let user select the image and able to change it befor Uploading
I made a simple example of preview and uploading image I think it will be helpful for you
Preview and uploade image angular2
I have a Servlet that I've designated as the welcome page for my Java Web Application. In the Servlets doGet method, I retrieve a list of Product objects from the database. The Product object is composed of: an ID, Name, Description, and Image(byte[]).
I then add the list of Products to the request as an attribute, and forward to a JSP where I want to display all of the products(in a table). Displaying the properties like name, id, and description are easy.
My problem is, I'm not sure how to display the image. Any ideas?
You would need to base 64 encode the image data and generate a data url which look like this:
data:image/png;base64,21fe8w4r7qwe/f4sd68f4/er41we5f1sd/1a3/13dfvd21
Something like this code would do the trick:
String url = "data:image/png;base64," + Base64.encode(bytes);
then use that url as your image src.
Masters,
I have a scenario where i have a list of Items and on clicking single item it gets details along with image src url using ajax call.
I want to display(render) image right on page.
Now Image source URL is a FileActionResult returning Base64 string.
The problem is the page does not render image although it is having correct Src URL.
And I don't want any additional Ajax call.
Please Help.
Thanks in advance.
How are you forcing the image to be updated?
The DOM is going to keep the image the same until you tell it to refresh the image -- I would suggest using something like
document.getElementById('theImg').src="/newImg.gif?unique=someuniquestring";
where someuniquestring is a new random datetime or something (to make sure browsers like IE don't cache the GET request).
I'm loading some page content using HtmlUnit, and I would like to be able to capture the URLs of images created in the following fashion:
<script type="text/javascript">
var img = new Image();
img.src = 'slider.png';
</script>
The key issue here is that the image is never attached to the document, so I can't find it by iterating over 'img' tags. Furthermore, HtmlUnit does not actually generate a web request for the image (as it shouldn't), so I can't pick it up by overriding the WebConnection and intercepting the request.
In a normal browser, the image would be preloaded when the src attribute is set. If an image would normally be loaded, I want to be able to tell that that would happen.
My constraint is that I do not control the content, so I can't just load the image differently. The content comes from a 3rd party, and I am validating it and recording anomalies. I prefer not to gather this information via a different tool, since HtmlUnit is doing a lot of other tasks for me already.