How to read and display Images in a react or next.js from Cloudinary
Published: 2021-08-31 13:25:26

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

<b>NOTE:</b> 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.

<b>Advantage of using cloudinary</b> 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
```javascript

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 (<b>You must get these values correct for you to read your images from cloudinary</b> and you can always get these values from cloudinary settings). 

<b>getImageSrc</b> (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.

<b>Note:</b> 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).

```Javascript
  {
        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 <b>getImageSrc</b> to return a full url of the image from cloudinary which is passed to img tag to be displayed. 

<b>Note again</b> that our data was originally stored in the database using any backend technology say Laravel. 
<b>In my next post</b>, 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.