We created a blog application in the previous lesson, where the user can create, view, edit, and delete posts. However, we neglected a tiny detail. Notice that even though we successfully uploaded an image, it is not rendered in the views/post/show.pug template.
1extends ../layout.pug
2
3block meta
4 title #{post.title}
5
6block content
7 h1 #{post.title}
8 div #{post.content}
9
10 a(href=`/posts/edit/${post.id}`) Edit this postSo, how can we add uploaded images in this case? It sounds like a simple task, but if you simply add a <img> tag and pass the image source like this:
1img(src=`/${post.picture}`, alt="An image")It will not work.
This is due to security reasons. Because by default, the users are not allowed to access the server's file system directly in the frontend, or any random user will be able to see the source code.
Loading images
However, there are some exceptions. For example, in this case, you need to allow the user to access the uploads directory in order to retrieve the images.
To do this, you must add the express.static() middleware.
index.js
1app.use("/uploads", express.static("uploads"));Here we are using the same use() method we've seen before, except this time, you need to specify a route prefix (/uploads).
It is similar to how we define routes in Express, only instead of mapping to a controller, when Express encounters routes that start with /uploads, it will look for its target inside the uploads directory. For example,
1img(src=`/${post.picture}`, alt="An image")This will be rendered into:
1<img src="/uploads/1713217437399-cat.png" alt="An image" />And notice that the src points to a route, which starts with /uploads, so Express will go to the uploads directory, and look for file 1713217437399-cat.png.
Loading scripts and CSS files
The files that are hosted on the server, but can be served directly to the user are called static files. The uploaded images are the most common kind of static files.
Besides the images, you can also serve CSS and JavaScript files (the kind that runs in the frontend) in a similar way. For example, assuming you have a statics directory like this:
1.
2├── controllers
3├── database.sqlite
4├── index.js
5├── libs
6├── models
7├── package-lock.json
8├── package.json
9├── routes
10├── statics <===
11│ ├── css
12│ │ └── app.css
13│ └── js
14│ └── app.js
15├── uploads
16└── viewsAdd another middleware in our index.js.
index.js
1app.use("/statics", express.static("statics"));And then, you can load the CSS and JavaScript inside the template like this:
views/layout.pug
1doctype html
2html
3 head
4 block meta
5 link(rel="stylesheet", href="/statics/css/app.css")
6
7 body
8 nav
9 a(href="/posts/new") New Post
10 a(href="/") Home
11 block content
12 footer
13 script(src="/statics/js/app.js")This technique allows us to modulate the frontend code.
Recall that in our previous examples, we put the Pug template and the JavaScript code in the same file, but now, you can put the JavaScript code in a separate file, and then import it into the template.