I am working on an application using Angular 5 as a front-end and Node.js as a back-end which uploads images to the server.
The problem is that after I upload an image to the server I cannot display it in angular.
My folder structure is like this:
AppName/client/src/app/app.component.html <- Here I want to display
the images; AppName/server/public/images <- Is the place
where the images are stored
Does anyone have any idee?
You have to configure your server in order to serve the right image when required. The problem is not about Angular.
If you are using express, you can add the following rule before serving the webapp:
app.use(express.static('server/public/images'));
Fix the above code with your relative path.
In this way, when your web server will receive a request, he will firsty see if it's an image contained in your folder, otherwise it will serve Angular.
Note
In this way, if you try accessing a not existent image, you will receive a text/HTML result with your webpage as content and 200 as status code.
You may need checking the extension of the file, if it is jpg, jpeg, png or gif you search in the folder, if the image exists you send it as response and if it doesn't exist you send 404 status code.
If the extension is not one of the above, then you serve the webapp in any case.
app.use(express.static('server/public/images'));
app.get(/\.(jpg|jpeg|png|gif)$/, function(req, res) {
res.status(404).send('Not found');
});
Related
I have a code that allows me to send files to server folder uploads using multer from react client side the process of sending data to server works perfectly and also getting back the file from server works perfectly.
The client side is running under 3000 and the server is running under 4000 .
the problem that I'm facing right now is displaying the file on the front part for ex an img
<img
src={`http:\\localhost:4000\\server\\${text}`}
className="messageText colorWhite"
alt="img"
/>
the image of the error is below
the text contains uploads/image1.jpg
when I inspect the content I found this
which mean that the image is well called from server side
Could it be possible to help me on this?
Best Regards,
The upload folder which contains the files is not being served up by the server at localhost:4000.
You must server the files in the uploads folder first. For eg in an express server you can access the files by specifying this route
app.get('/uploads/:filename', (req, res) => {
res.sendFile(req.params.filename, {root: path.join(__dirname, '/uploads')});
})
Now setting src=http://localhost:4000\uploads\img.png would get the image img.png stored in the uploads folder
As an alternative solution, you can server up the entire uploads folder by
app.use(express.static("uploads"));
Make sure you specify the full path in "uploads"
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 have used express.static() for getting images from folder. In that folder, image is getting uploaded dynamically. After uploaing image to folder I am not able to access that image from browser. I can access image only after reloading node server. Could you please support me to solve this issue without reloading node server. I have disable etag also. My code is
this.app.use(express.static(path.join(__dirname, "./public"),{etag: false}));
I have a node.js server(separate directory) where i am saving files in uploads folder and saving image path in db. I have following directory structure in my node.js server
node_modules
src
uploads
|category-name-folder
|image-name.jpg
|category-name-folder
|image-name.jpg
package.json
i am saving image path in db like this uploads/category-name/image-name.jpg.
Now i want to display all images in angular app. So please guide me how can i display these images to angular app? Should i send image paths to angular app via an Api ? if yes so what complete url should i send to angular app and what url should i bind in angular app img src?
Note : I have a separate directory structure of client app (angular)
In server side(Nodejs), serve the uploads folder statically. To Angular send the image path and give it as a source for images.
<img [src]="imagePath">
The image source should be something like 'YOUR_DOMAIN/uploads/filename'. This is required for your case since you are providing the angular index.html in a separate domain(server).
Use this link if you are using express
Basically, what you need to do is create a GET endpoint in your node server to return the image, something like:
[GET]images/{folder}/{imageName}
And instead of saving the image path, you can save the URL to call that endpoint:
uploadedObj {
url : config.domain + 'images/' + folder + '/image.jpg'
}
Then when you get the data in your angular, you put that value directly in the image src.
<img src="{{ upload.url }}" *ngFor="let upload of uploads"/>
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.)