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}));
Related
I have nodejs app using express module, i had been changes some images inside public folder but when i checked from users side still on the old images and when clear browser cache i get on new images , is there a command to make this automatically.
Have a look at Etag. If the content of the resource is not changed the server will not send it again. When it is, as in your case it will.
Looking at the express docs I see etag is an boolean option of the middleware function static.
express.static({etag: true})
Some background information about tags.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/ETag
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 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');
});
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.)
I'm using static middleware to serve stylesheets and scripts
app.use(express.static(path.join(__dirname, 'public')));
Everything works on localhost, but once I deploy the app to openshift I get 503 code for each static file the page tries to load.
If I open another browser tab and directly past the URL of one of those files I actually get the file.
P.S.: I am using express-react-views as a view engine.
Basically, I'm using express-react-views as a view engine and it includes Babel.js which uses cache for transpilation optimization. The problem is that it tries to write the cache files in a directory that requires higher permission. To solve I disabled the cache.
process.env.BABEL_DISABLE_CACHE = 1;
I hope this can help other people having the same issue.