I'm having a backend nodejs server and a frontend angular web applicantion both are in different folders and running on different ports (Nodejs server: 8000 and angular client:4200). I'm storing images on nodejs server's directory in "uploads folder" using api and then storing the image path in the database. Then retrieving the image path using api to display it. I'm getting the image path like this (http://localhost:8000/uploads/030312-1618.jpg) but the image is not displaying.
Assuming that you are using ExpressJS, have you set up the serving of static files as follows.
app.use(express.static('uploads'))
Source : http://expressjs.com/en/starter/static-files.html
(Can help you further if you add more details such as any errors that you get, more information about the tech stack you use, etc.)
Related
I have a Node.js backend that sends an icon image to a React frontend. Initially, I encode this image as a Base64 string and store it directly in the database. I created an api that returns this string to the frontend. However, I read that it is bad to store it in the database, so I re-wrote the api to store this string in the server as a json file and now my api returns the absolute path to this json file. However, how is the React frontend supposed to retrieve the file? Is it possible to use the absolute path or do I have to create another api to return a file object ? If so, how do I do that?
I'm a newbie at both react and node.js so any help is appreciated.Thanks.
EDIT: I stored the file path as __dirname of where my code resides + filename.I'm getting cors error when accessing that url
Use Express to share out that folder as such-and-such.
Suppose you keep your files in a folder called files, just off the root. And suppose your server structure looks roughly like this:
- backend
- app.js
- frontend
- Components
- Routes
- public
- dev
- index.html (your template file)
- files
- myimage.png
In your root js file (app.js? server.js? index.js?):
const app = express()
app.use('/static', express.static('public'));
app.use('/files', express.static('public/files'));
Then, in the frontend code:
<img src='/files/myimage.png' />
By the way, there is no problem storing images as base64 in your database... but every database backup will also backup those images. If you have a small database, no worries. However, if you have a LOT of images, especially very large images, this will make your database (and backups) unnecessarily large and unwieldy.
Everything depends on your use case.
I am creating an react app using create-react-app for school management system. I had used node js for creating api end point. I am able to store student detail and can fetch it back to display in react.
I had created an endpoint for uploading student images, which is also working perfect.
I had stored the image on node js server public folder. I know it should be on client public folder but if another application for example android or angular or vue application tries to call the same image will not get as it will be stored in react public folder.
So how could I solve the image problem?
You've done all the logic right, just add image URL to user profile, for example :
imageUrl: 'https://{your API URL}'
or the better way to upload all images on file server like S3 or Google Cloud Storage, and save only link to image on user profile
I'm running my react client on localhost:3000 and my express server on localhost:4000, and I have a static folder in my server with images.
I'm trying to save the image path to a MySQL database, and use that in React as an img src, but can't figure out how to do it without hard coding the path. For example, localhost:4000/images/img1.jpg works, but if I change the host name tomorrow, all of my db data becomes irrelevant.
Three answers:
In react you can fill props by joining a constant string and a variable. Just save the /images/img1.jpg in the database instead of full URL. Then in react do <img src={'http://localhost:4000/' + imagePathFromDB} />. When you change the server just change it once.
You can create a simple SQL query to update your DB to be relevant this is the beauty of SQL database.
For e.g.
update images set path=replace(path,'localhost:4000','newdomain.com')
Voilla!
If you using create-react-app you can serve the frontend and backend from the same domain using the proxy parameter. And then just save in the database /myimage.jpg and in React <img src={myVariable} />
I am working on my first ever MERN stack web app. I finished development and trying to host in VPS.
Everything working fine. But, I am not able to view the uploaded images. I share you the few details about the project structure.
React app is build for production and kept in public folder.
Upload folder is created where user uploaded images are kept and its location is stored in DB. (ex: /uploads/user1/img1.jpg). Using Multer to handle image upload.
This is the folder structure of my Express server which also servers static files.
-MAIN_EXPRESS_APP_FOLDER
------Routes
------Public
------Uploads
------package.json
To make public and upload static, following codes are added in Server.js file:
app.use(express.static(path.join(__dirname,'/public')));
app.get('/*',(req,res)=>{
res.sendfile(path.join(__dirname='public/index.html'));
})
app.use('/uploads', express.static('uploads'))
I am able to access my web app and also i can insert data in DB. Image upload is working as expected. But, Express not serving uploaded images.
What could be problem?
As for static content you set the folder to be public now what i think is you should move your uploads folder inside public and try to access the images hope they will be served currently your application is not allowing to server data else then public directory hope it will help you
I work on an webapp which use REACT JS (with NODE, port 3000) and an API (with NODE JS, port 3100).
All requests made by client passing throught my API.
In this app, client could be able to listen mp3s downloaded and stored into my API. I made different schemas but I don't know which one can work.
SCHEMA 1.
REACT send parameters to API
API download the file and store it on a temporary directory
API send the URL (like : http://localhost:3100/sound/exemple.mp3) to REACT
REACT use that URL in 'src' of the AudioPlayer
Temporary files are delete with a CRON setting up on API server
I tried that solution but I have an error when I want to play the sound
(error: Can't GET /URL)
SCHEMA 2.
REACT send parameters to API
API download the file and store it on a temporary directory
REACT download the file from API and store it into public directory (by using express static)
REACT use that URL in 'src' of the AudioPlayer
Delete the file twice (API and REACT)
Another solution is to download the file directly from my source on REACT. But I need to hide the URL of the source (that why I pass throught my API).
Maybe there are others solutions ?