Just to inform that backend is in NodeJS and frontend in ReactJS.
[enter image description here][1]
[1]: https://i.stack.imgur.com/ifklU.png
I have added how my structure of project look like in image. When client save image/file it saves under backend in folder named uploadedData. Consider that I already know the name of photo and of course directory also. Can someone explain me how can I get image from
uploadedData directory from backend and show on frontend with the help of
components/Products.js which is part of frontend. Since I am newbie it would be good if I get little detailed answer.
Note: I have achieved this thing with really poor approach:
Writing this line of code
app.use('/uploadedData', express.static(__dirname + '/uploadedData'))
allow me to see image directly on the browser at http://localhost:8081/uploadedData/artikles/1222222.jpg and if I write the same url equal to src in the <img> tag I have achieved the goal but I want to get better approach.
Related
I'm trying to display a static image located in the same folder as my Html file but it seems I can't get the right path for it to display correctly. The application I'm developing is an atlassian plugin that also includes a java backend to get Data from the Database and I'm displaying it on the frontend using HTML and javascript, the whole application runs on a webserver as a Plugin. Both the image and the Html file are located in here: D:\clone4\project\src\main\resources\templates\scheduleraction
The URL path for the web application is:
https://staging.com/jira/secure/SchedulerAction!default.jspa
I tried many ways and this is the last one :
<img src="/SchedulerAction!default.jspa/piechart.jpg" alt="pie-chart">
I need to add the correct path in the "src" so the client can retrieve the image from my Files on the webserver. I would love any hint or help!
you should use exact path like ./Image.png. And avoid using Images out of the static HTML file located directory
Try to use a service to upload that image and use the provided url.
Such as https://imgur.com/. After upload it, use into the src the correct url with the filetype extension.
I am trying to send an image to client in nodejs/expressjs REST API. What I am trying to do is saving that image url in mongo db database. When user make a get request, I send all the necessary data alongside the image which is basically avatar. Now on the client side I am not able to receive that image. I am keep getting below responses.
in console tab of chrome dev tools I am getting below.
When I see in the network tab I get below response which also has the link to avatar. Everything is perfect here.
Now when I check my uploads folder I do have the image. Check below:
After all this I am still getting these errors and still not sure where exactly am I making mistake. One thing is that maybe the client is trying to make a request to /uploads/image end point which I do not want. I simply want that image to be displayed using the url I am getting on response.
As we do not see the configuration of static files in express, this might be the problem.
To serve static files in your /uploads folder you need to add this line
app.use('/uploads', express.static('uploads'));
The 'uploads' directory will not be accessible from the frontend.
In node, move the uploaded file in to a subdirectory of the public directory of the node app, and set a relative path from there ans the image path.
I am using node.js and express server-side. I am using whatwg-fetch and React client-side. What is currently happening is:
Step 1: I use fetch client-side to make a post request to the server.
Step 2: I have the server send back a file indicated by the client. Example:
res.sendFile(path.resolve(__dirname + '/../Images/' + 'ImageTheClientWants.jpeg'));
Step 3: I look at the response.body on the client-side and it is of type ReadableByteStream. I am not sure how to proceed from here.
My only thought right now is to read the bytes into a Buffer, turn that Buffer into a string and then if necessary encode that string to base64.
Then I could setState in react an element like this:
<img src={src} />
where
src="data:image/jpeg;base64," + the_string_I_created_from_ReadableByteStream;
My first problem with this approach is that javascript does not seem to have lots of good tools for working with buffers out of the box (unless I am missing something in the docs). My second problem with this approach is that there is probably already some package on npm that does this in a better way and has been tested.
My question is how can I send a jpeg image file (that is not public) to the client and display that image in an html image tag? Am I on the right track or is there another way to accomplish this?
I also just want to note that in general I do not want to make the images public which is why I do not just upload them to the public folder.
Thanks for any help!
How about this solution,this is the related question click here
react:
<div>
<img src={image_src}></img>
</div>
express:
router.get('/image/:id',function(req,res){
res.sendFile(dynamicImagepath);
});
How to secure the src path of the image when clicks on inspect element so that user should not get to know about the actual src path..please help me with the solution and it should be done with javascript only no other tags should be used.
You can convert image into base 64 data URIs for embedding images.
Use: http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/
Code sample:
.sprite {
background-image:url(data:image/png;base64,iVBORw0KGgoAAAA... etc );
}
This is commonly done server-side, where you have an endpoint that serves the image file to you as bytes...
You can store the images in a private location on the server where IIS/<your favourite web server> doesn't have direct access to it, but only a web app, running on it, with the required privilege is authorized to do so.
Alternatively people also "store" the images in the database itself and load it directly from there.
In either case, the response which has to be sent back has to be a stream of bytes with the correct mime type.
Edit:
Here are a couple of links to get you started if you are into ASP.NET:
http://www.codeproject.com/Articles/34084/Generic-Image-Handler-Using-IHttpHandler
http://aspalliance.com/1322_Displaying_Images_in_ASPNET_Using_HttpHandlers.5 <- this sample actually does it from a database.
Don't let the choice of front-end framework (asp.net, php, django, etc) hinder you. Search for similar techniques in your framework of choice.
Edit:
Another way if you think html5 canvas is shown here: http://www.html5canvastutorials.com/tutorials/html5-canvas-images/
However you run into the same problem. Someone can view the image url if they can see the page source. You'll have to revert to the above approach eventually.
I was wondering if it is possible in JS to open a directory, read an image file and display it to Html? I believe JS restricts from being able to open any file in a directory directly, but what I want is:
I have a XML file which will contain the path to a image file in the web server root folder
so my hierarchy is like this
webserver root folder--->|
html
js
css
images
xml
, and I will use XmlHttpRequest and feed the directory tag and file name tag to my JS file which has to display the image to my frame in the Html page.
[My image is also in the same webserver root folder but in a different folder from html]
Any pointers on how to go about it? I guess we can store the image file also in XML as a base64 encoded data, but that would make the data exchange huge, also don't know if this is a ideal method (is it? please suggest)
Please give me some tips for this.
Thanks
Balaji R
JavaScript does not have access to filesystem on server, since it runs on the client side.
But with JavaScript or Ajax you can call some php code on server which will read the image from the file system and then it will pass this image back to the JavaScript.
I have described here how to do this.
If I am following you correctly, example.com/js/somefile.js is trying to access something like example.com/images/image.jpg?
If so then i would either use the absolute URL of the image:
"http://www.example.com/images/image.jpg" or the relative path "../images/image.jpg"
When referencing the images in your code you could actually use a plain text file, one image path per line. Then in your onreadystatechange function:
pictures = var.responseText.split("\n");
now pictures is an array of picture paths.
JavaScript only has access to the information & priviledges that the browser has access to, so unless the image is in a directory that would normally be accessible on the web site, you're not going to have much luck using just JavaScript.
Is there any way that you can make the path in the filesystem available to the web document root folder? Maybe by using an Alias or Symlink?