I can't display image, image is in the same folder.
each user,i in users //users data loop
h2=user.name
.card
img(src='img_rr_01.jpg', alt='Avatar', style='width:100%') // Image
|
.container
h4
b=user.email
|
p=user.name
Make sure you are specifying your public assets folder by mentioning something like this -
app.use(express.static(path.join(__dirname, "/../public")));
Then your static file's paths should normally be starting with / and then follow the path as it is in your public folder. e.g. if your image is in public/images folder, then update your src to be /images/img_rr_01.jpg.
Please note that you need not mention public folder in your src.
Express is not going to serve anything that you don't give permission to. You have to give permission by using express.static middleware.
To serve static files such as images, CSS files, and JavaScript files, use the express.static built-in middleware function in Express
For more details refer to https://expressjs.com/en/starter/static-files.html
If you have something like below in app.js you can directly specify the folder in which you have stored the images.
app.use(express.static(path.join(__dirname, 'public')));
Related
I am new with nodejs and much more new with express module. I have a app setup like this;
The chart.js is my nodejs file. I am trying to make my js files and css file static by using app.use(express.static(-I didn't understand what i need to write here-)) in order to render my index.html properly but I don't know how to use and I did not understand the documentation. In the documentation they say coder able to use static like app.use(express.static('public')) but they don't mention about what is public, where it is in the project, what does it contain. Can someone please help mi about this situation? How does this express.static works and how can I make my files static?
NOTE: DO NOT PUT PRIVATE FILES INSIDE YOUR STATIC FOLDER.
app.use(express.static(__dirname + '/public'));
here you see inside of express.static() function is the path of your static folder that will be going to access directly from the browser and you don't need to write their routes because that folder will give all the access to the public. like css,js files. and those files you will be able to access as its directory.
in the above picture, you have html, css and js files in public folder which is located on root folder of the application. you need to access those public static files which are not related to nodejs so it should be defined as static on your server node js code as : app.use(express.static(__dirname + '/public'));. and it will get all the routes like:
http://localhost:3000/css/style.css
http://localhost:3000/javascript/script.js
http://localhost:3000/favicon.ico
http://localhost:3000/index.html
http://localhost:3000/robots.txt
you also can set prefix for those static routes. for that, you need to give prefix as: app.use('static_folder', express.static(__dirname + '/public')); then it will be looks like :
http://localhost:3000/static_folder/css/style.css
http://localhost:3000/static_folder/javascript/script.js
http://localhost:3000/static_folder/favicon.ico
http://localhost:3000/static_folder/index.html
http://localhost:3000/static_folder/robots.txt
My routes are configured in app.js. The /users route works as expected except when rendering express layouts I cannot access the css files located at ./css/style.css
If I open a page using the /users route, I can see it's looking for /users/css/style.css but I thought setting the directory to static would override this?
app.use('/', require('./routes/index'));
app.use('/users', require('./routes/users'));
app.use(express.static('css'));
First of all, what app.use(express.static('css')); does is to serve statically the files starting from the given path, in this case css.
A good practice is to create a folder called public and use it to serve it's inner files statically. So your static folder should be like this:
-public
-css
-style.css
and your app.js should have app.use(express.static('./public'));
Now, another problem you may be having is the way you cast the paths (url) to load certain files.
Let's say you request http://localhost:PORT/users and the served HTML loads a stylesheet using <link rel="stylesheet" type="text/css" href="PATH">.
You could write the PATH in 2 ways.
css/style.css
/css/style.css
The difference is that the first method will search for the file relative to the path you're already in (e.g http://localhost:PORT/users/css/style.css). The other method will get such file using the 'domain' you are already in as a starting point (e.g http://localhost:PORT/css/style.css.
Hope this helps c:
I figured it out. Added this to my app.js file:
// GET /static/style.css etc.
app.use('/users', express.static(path.join(__dirname, 'public')))
More information here if needed: http://expressjs.com/en/api.html
In my project I need to store some text files dynamically and end user should be able to download them from browser. I know the best way is using object store like MINIO or S3 but unfortunately the only way I have is to use in memory storage. So what I am trying to do is: I made a public folder and I exposed it using the following code:
var express = require('express');
var app = express();
//setting middleware
app.use(express.static( 'public')); //Serves resources from public folder
var server = app.listen(5000);
it is as simple as that. Then for testing just to make sure I can download and reach a file I created a public folder with t.txt file in it and when I try:
http://localhost:5000/public/t.txt
I get
So why am I not getting it? Also is what I am trying to achieve will be a good match to scenario and is it doable at all?
When you're not specifying a path in app.use(), your app will serve the contents of the directory you're pointing to in express.static() on the root path. Try this:
http://localhost:5000/t.txt
That said, if you want it to be accessible at /public/t.txt, just specify the path:
app.use('/public', express.static('public'))
At first use the following line of code:
app.use(express.static(__dirname+'/public'));
This means that your home directory for static HTML pages is in the "public" folder. Note that the "__dirname" points to the directory of the current js file.
After that, call the following URL from the browser or POSTMAN:
http://localhost:5000/t.txt
As you can see, there is no need to write http://localhost:5000/public/t.txt referring to the "public" folder because you have already specified that in the app.use line.
I have a public/ directory that I have set up as containing static files in express:
app.use(express.static(__dirname + '/public'));
It has an images directory in it
/public/images
And that has a deep subtree of various images. If I put in the full path to the image, it loads with no problem.
http://mysite.com/images/tiles/grass.png
When I just go to a url such as
http://mysite.com/images/tiles/
It just gives me the error that it gives when it tries to find a non-static path, but the path doesn't exist.
How can I make it so all directories in my static path show something similar to the way Apache shows the navigable directory structure?
Because what you're requesting when putting
http://mysite.com/images/tiles/
is a directory listing request, and it seems that static middleware just serves files not directories. You have to use
app.use(express.directory(your_path));
app.use(express.static(your_path));
This will let you request the URIs you're talking about.
For Express 4 this looks a little different:
var directory = require('serve-index');
app.use(directory(your_path));
Check here for details:
https://github.com/expressjs/serve-index
So I've been trying to access a local js file within my ejs template but I can't figure out on how to do this.
I've tried creating a public folder and then add the files in there, and then this :
app.use(express.static(path.join(__dirname, 'public')))
But it keeps saying that the files are not found.
Can someone please explain me how to do this?
The template is nothing special and the rest is a simple express setup.
My scripts are in /views/scripts but it seems impossible to access those.
app.use(express.static(path.join(__dirname, 'public'))) //use the following code to serve images,CSS & JS files in a public folder.
so the folder structure for front-end will be like this...
public
---js
----javascript1.js
----javascript2.js
---css
----css1.js
----css2.js
---images
----img1.js
----img2.js
change the second script tag to :
<script type="text/javascript" src="/js/javascript1.js"></script>
For more details of express.js static-files