How to read and display Images in a react or next.js from Cloudinary

Cloudinary is a platform that enables developers to store and manage images, videos and other rich media assets.

NOTE: Assuming that you have already stored your images on cloudinary using a backend technology e.g a php based technology like Laravel or CakePHP, this 2 minute read tutorial aims to show you how you can read images, transform/crop/resize (if you want) and display them in a react/next js application.

Advantage of using cloudinary is that you can resize/transform your images the way you want without affecting the image visibility on the web.

First of all, you have to install cloudinary package in your react/nextjs project using npm i cloudinary or yarn add cloudinary.

Below is the code snippet showing how cloudinary is used in react/nextjs

var cloudinary = require('cloudinary/lib/cloudinary');

const cloudinary_name = 'yourcloudinaryname';
const cloudinary_api_key = 'yourcloudinaryapikey';

const getImageSrc = (cloudPath, width, height) => {

    cloudinary.config({ 
     cloud_name: cloudinary_name,
     api_key: cloudinary_api_key
   });
    var url = cloudinary.url(cloudPath, 
               {
                width: width, 
                height: height,
                crop: "fill"
    });
    return url;
  };

In the above code snippet, you import cloudinary as the first step using require function and then initialize your cloudinary name and cloudinary api key (You must get these values correct for you to read your images from cloudinary and you can always get these values from cloudinary settings).

getImageSrc (you can give it any name) is my reusable functional component which can be called anywhere in other components to return url of the image(s) stored on cloudinary . The url returned is supplied on the img tag as the src value for the image to be read as shown in the code snippet below.

Note: getImgSrc takes in cloudPath (stored as one of image details in database after storing it on cloudinary, it is usually a directory path on cloudinary), width and height parameters are passed so that you can resize your image the way you want(custom dimensions for the image).

  {
        data ?
          data.map((item, i) => {
              return (
                <div className={styles.image}>
                 <img src={getImageSrc(item.imagePath,70,70)}/>
                 </div>
              )
          })
          : (null)
}

So in the above code, data is a variable containing details from a datasource e.g database. I'm using map function to render that data and within the body, we use our function getImageSrc to return a full url of the image from cloudinary which is passed to img tag to be displayed.

Note again that our data was originally stored in the database using any backend technology say Laravel.
In my next post, i'm going to demonstrate how you can store images on cloudinary using a backend technology like Laravel or CakePHP. Please follow me to stay updated on my posts about software development using different technologies.