Fetching Image on the Frontend in MEAN Stack

In our previous section, we worked with the file url, and we also extracted the imagePath successfully. Now, we want to display the image which image path indicates. So in this section, we will learn how to fetch images on the frontend. We will use the following steps to display the image on the frontend:

1) We will go back to our post-list.component.html file. Here, we only output the header and then in the expended box for the posts, just the content. Now, we also want to have our image, and we can style this however we want. We will add a div in between the title and the content, and in this, we will set a class name that is up to you. In this div, we have our image. We will again bind our alt tag to post.title and src to post.imagePath in the following way:

If we save it and go back to our angular, we will get an error, and we will see no images anywhere.

This is not working because we are requesting an invalid image path. We got no image paths for our older posts. We will go to the Network tab and check the request where we get our posts. There in the preview of the response, we have our posts array, and indeed in the database, the image path is missing.

The image path was not saved because we have not created a post since we added that functionality. So, we will delete all the posts, add a new post, and check for the image.

2) The error will still be there because we fail to fetch that image. The reason for this is that we didn't grant access to that images folder on our backend. By default, all our files are inaccessible. We control our routes to tell what can be accessed. We don't give access to the image folder anywhere. For this, we will go to our app.js file and add something here.

We want to make that images folder statically accessible, which means any requests targeting that folder should be forwarded or should be allowed to continue. After our bodyparser middleware, we call another middleware. This middleware will be coded in the following way:

This middleware is built into an express. This middleware will be applied to any requests which have /images in them. If that is the case, the middleware we want to add is the one shipping with express, the static middleware. So, we used express .static().

The app.use("/images", express.static()) means any requests targeting /images will be allowed to continue and fetch their file from there. However, app.use("/images", express.static()), will not work because /images is actually incorrect. It is hidden away under the backend folder. So to map this, we imported a path package that was shipping with NodeJS and constructed the path to our backed images folder with the path.join() method.

Now, we will save all the files and go back to our angular and see the image.

3) Everything is looking good, and we can see the image. Now, we will fix the styling by going to our frontend code. We will write the CSS code for the post-image class in the following way:

Now, we go back to our angular app to see the changes.

Now, we got our image loaded from the backend, uploaded by our application. In the next section, we will learn how we can update these posts.

Download Complete Project( image upload.zip)