I've learned and implement successfully that how to upload images on server disk with servlet from Here and now trying to show the image on another jsp userProfile.jsp with the help of following code :
<img src="<jsp:include page='WEB-INF/jspf/profileImage.jspf' />" height="175" width="175" />
and code of profileImage.jspf is as follows:
OutputStream o = response.getOutputStream();
InputStream is = new FileInputStream(new File("../files/backPetals.jpg"));
byte[] buf = new byte[32 * 1024];
int nRead = 0;
while( (nRead=is.read(buf)) != -1 ) {
o.write(buf, 0, nRead);
}
o.flush();
o.close();
return;
but it does not works..
Any other ways to display the image from disk on jsp together with other matter on page?
I've saved my images on /files directories on the application root folder.
There are several serious mistakes in the approach:
You should not store the uploaded file in the application root folder. They will all get lost whenever you redeploy the WAR (simply because those files are not contained in the original WAR file.
The <img src> should not contain the raw image content, but it should contain an URL which returns the file content. E.g.
<img src="profilePictures/${user.profilePictureFilename}" />
You should not use JSP to write binary data to the response. Use a servlet instead. Or if you can, just add the path to uploaded files as another webapp context.
Here are several answers which should help you in the right direction:
How to provide relative path in File class to upload any file?
What is the correct path I need to see my uploaded image?
How I save and retrieve an image on my server in a java webapp
The syntax of an img tag is <img src="url_of_the_image" .../>. What you're doing is <img src="contents_of_the_image_file" .../>.
You need to generate a URL to a servlet, and this servlet needs to open the image file and send its content to the output stream. You can't download an HTML file and an image in a single HTTP request.
Related
My React Native 0.63.2 app will show images stored in cloud storage with code which is similar to below
<View style={styles.container}>
<Image
style={styles.stretch}
source={{uri:'https://filefolder.download-only.com/image1.jpg'}}
/>
</View>
The problem is that this https://filefoler.download-only.com/image1.jpg only allows to download file to local disk before opening it. One option I can think of is to download and save the image in a temp file locally and display it with source={{uri:file:///path_to_image_file}}. But this option would require explicit downloading of each image even before user clicks and opens it. Is it possible to make the download-only image behaving like a click-able image url? Ex, add "data:image/jpeg;base64," before download-only url (something like source= {{uri:"data:image/png;base64,"+"https://filefolder.download-only.com/image1.jpg")
Use rn-fetch-blob for this: https://github.com/joltup/rn-fetch-blob
Fetch image as a blob
Convert blob to base64 to display image, use following code to convert blob into base64
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function() {
var base64data = reader.result;
console.log(base64data);
}
After ran some test code with a URL copied from the cloud storage, it turns out that the image can be displayed by <Image> as usual with the URL. There is no need to prefix the image path as we did for stream data.
<View style={styles.container}>
<Image
style={styles.stretch}
source={{uri:'https://filefolder.download-only.com/image1.jpg?expires=xxxxx&signature=xxxxxxxxxxxx'}}
/>
</View>
Please be noted that in browser the url (contains the authorization signature) only allows download the image to local file system. <Image> tag however will download the image first and display it in render view.
I am trying to load images from the public folder in the vue components. The asset helper doesn't work in vue , so I need to use the format
<img :src="'img/ic_add-sm.svg'" >
But instead of looking for the images in the public folder , vue is appending the current URL to the image path. For example , if the url is www.example.com/posts
it adds www.example.com/posts/img/ic_add-sm.svg
instead of www.example.com/img/ic_add-sm.svg
Add a forward slash to the beginning of your image path.
<img :src="'/img/ic_add-sm.svg'">
Since you don't appear to be doing anything special you should be able to just use
<img src="/img/ic_add-sm.svg">
At first bind the value of image source
<img :src="getPhoto() + variableName" />
Then create the function under your methods section and simply return the directory location, that's all.
getPhoto(){
return 'images/';
}
Note that, You cant declare directory location directly to :src attribute.
I have created a js file where an array contains multiple objects. Every object has an image path given. Using for loop, I am importing every object to my component. Everything works fine except the image. It's broken. It's not taking the relative path. I have stored all the images in a folder. Below is my code:
Data.js
export const dashboardUtil = [
{
title: "Posts",
count: 500,
image: "/src/images/1.png"
}
//rest of the objects
]
Component.js
let blocks = [];
for(let i=0;i<dashboardUtil.length;i++){
blocks.push(
<Col xs={12} md={6} sm={6}>
<div className="main-block" className="stats-block">
<h3>{dashboardUtil[i].title}</h3>
<p>{dashboardUtil[i].count}</p>
<img src={dashboardUtil[i].image} />
</div>
</Col>
);
}
image: "/src/images/1.png"
This is not a relative path, its absolute (starts with slash). If you intend it to be relative, use ./ e.g. ./src/images/1.png.
The bigger issue is that you're providing a path to a local resource to the context of the users browser. It expects this to be a http(s):// resource. You need to provide an endpoint that your web server handles and serves up the resource.
Either:
Your image needs to go into a location your web server can access, and you need to set the img src attribute to reference that location
You should look into webpack and a file loader plugin that takes a local image path via require(), and copies that to an accessible location.
use :
import image from "../pathToImageFolder/image1.png";
//path to image will be automatically constructed by webpack
<img src={image}>
I'm using JSF2.2, Tomcat 8 and MySQL DB to create a simple CMS. In my back pages I use Primefaces p:editor to create/edit my page content. I would like to insert an image somewhere into the text. It would be great if I could upload the image and insert it at the current cursor position. Ideally, the image should be saved as a blob, but if it's easier for the implementation it could instead be stored as a local file.
I can see that p:editor already has an option to insert a URL of an image, resulting in the <img> tag in the text. But I would really like the possibility to upload an image from my local drive. I haven't been able to Google anything useful so far.
this is how i did it:
.xhtml:
<p:editor id="editor"
widgetVar="editWidget"
value="#AnnouncementBean.text}" />
<p:fileUpload id="upload"
fileUploadListener="#{AnnouncementBean.uploadListener}"
label="Insert image"
mode="advanced"
allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
update="editor, growl">
</p:fileUpload>
An in my Backing Bean in the uploadListener after file upload:
String value = FacesContext.getCurrentInstance()
.getExternalContext().getRequestParameterMap().get("editor_input");
setText(value + "<img src=\"/uploads/" + result.getName()+"\" />");
RequestContext.getCurrentInstance().update("editor_input");
where "editor_input" referes to the actual form field submitted for the editor (PF adds the_input to the id of your editor)
Notice how I update the editor_input not the actual editor. Only problem now is that the image is appended to the end of the text. sou you must move it manually within the editor
You can use a string to receive the editor (or textEditor) value, then use regex to find all img elements.
This is my code.
String regex="<img src="data:image/(gif|jpe?g|png);base64,([^"]*")[^<>]*>";
Matcher m = Pattern.compile(regex).matcher(your_textEditor_value);
while(m.find()){
String imageFileType=m.group(1);
String imageDataString=m.group(2);
byte[] imageData=Base64.decodeBase64(imageDataString);
}
The imageFileType is your file type, and imageData is data of the file. You can use it to do other thing.
please let me know that how can i upload an image using primeface fileUpload.i want to store the uploaded image into a folder and also want to resize the image using thumbnailator .i have already tried the primeface fileupload but not getting.
<p:fileUpload allowTypes="/(\.|\/)(gif|jpe?g|png)$/" auto="true" dragDropSupport="true" fileUploadListener="#{loginController.fileUploadHandler}" />
public void fileUploadHandler(FileUploadEvent event) throws IOException {
UploadedFile file = event.getFile();
InputStream inStream = file.getInputstream();
Os.write("C:\\Users\\think again\\Desktop\\uploaded\\pic.jpg", inStream);
Thumbnails.of(new File("C:\\Users\\think again\\Desktop\\uploaded").getAbsoluteFile()).size(100, 100).outputFormat("jpg").toFile("C:\\Users\\think again\\Desktop\\thumb");
}
but the file object contain a part item dont know what it is. will get the fileItem object inside the part.please help me to upload the image into the correspondding location
how about this : save image file in specific directory jsf primefaces project
PrimeFaces uploadFile: how can I save the uploaded image file to some directory in web app and retrieve it back
http://java.dzone.com/articles/how-upload-primefaces-32-under
and also did you try googling for a solution?