title: Error: Invalid src prop on `next/image`, hostname "res.cloudinary.com" is not configured under images in your `next.config.js`
body: <p>I'm creating an array of objects where I have an image src property whose name is <code>coverSrc</code>, and I'm exporting &amp; importing it into my main component. In my main component, I m using the Material UI CardMedia component to display images. but it gives me the following error:</p>
  <blockquote>
  <p>Invalid src prop on <code>next/image</code>, hostname &quot;res.cloudinary.com&quot; is not configured under images in your <code>next.config.js</code></p>
  </blockquote>
  <h3><code>data.js</code></h3>
  <pre class="lang-js prettyprint-override"><code>export const dataList = [
  {
      id: 1,
      title: &quot;Dim Sums&quot;,
      serviceTime: &quot;24-30min&quot;,
      deliveryFee: 1.5,
      category: &quot;dish&quot;,
      cuisine: &quot;chinese&quot;,
      rating: 2,
      price: 4100,
      coverSrc: &quot;https://res.cloudinary.com/arifscloud/image/upload/v1625119382/image_apxesv.png&quot;,
    },
  {
      id: 2,
      title: &quot;Dim loups&quot;,
      serviceTime: &quot;22-35min&quot;,
      deliveryFee: 1.3,
      category: &quot;dish&quot;,
      cuisine: &quot;italian&quot;,
      rating: 3,
      price: 3100,
      coverSrc: &quot;https://res.cloudinary.com/arifscloud/image/upload/v1627596941/image_apiop.png&quot;,
    },
  ]
  </code></pre>
  <h3><code>ListItem.jsx</code></h3>
  <pre class="lang-js prettyprint-override"><code>import {
    Card,
    CardHeader,
    Avatar,
    CardMedia,
    CardContent,
    Typography,
  } from &quot;@material-ui/core&quot;;
  import React from &quot;react&quot;;
  import useStyles from &quot;../../../styles/style.js&quot;;
  import Image from &quot;next/image&quot;
  
  
  const ListItem = ({
    item: { coverSrc, title, price, deliveryFee, serviceTime, rating },
  }) =&gt; {
    const classes = useStyles();
    return (
      &lt;Card className={classes.listItemMainDiv}&gt;
        &lt;CardHeader
          avatar={
            &lt;Avatar aria-label=&quot;recipe&quot; className={classes.ratingAvatar}&gt;
              {rating}
            &lt;/Avatar&gt;
          }
          title={title}
        /&gt;
        &lt;CardMedia className={classes.media} title=&quot;List item&quot; &gt;
            &lt;Image src={coverSrc} layout=&quot;fill&quot; alt=&quot;image&quot;/&gt;
        &lt;/CardMedia&gt;
        &lt;CardContent&gt;
          &lt;Typography variant=&quot;body2&quot; color=&quot;textSecondary&quot; component=&quot;p&quot; gutterBottom&gt;
            Delivery Fee ${deliveryFee}
          &lt;/Typography&gt;
        &lt;/CardContent&gt;
        &lt;div className={classes.cardFooter}&gt;
          &lt;Typography&gt;{serviceTime}&lt;/Typography&gt;
          &lt;Typography&gt;{price}&lt;/Typography&gt;
        &lt;/div&gt;
      &lt;/Card&gt;
    );
  };
  
  export default ListItem;
  </code></pre>
  <h3><code>next.config.js</code></h3>
  <pre class="lang-js prettyprint-override"><code>// next.config.js
  module.exports = {
    images: {
      domains: [&quot;res.cloudinary.com&quot;],
    },
  }
  </code></pre>
  <p>I think import from array of object's property <code>coverSrc</code> there is some problem.</p>
  <p>Can anyone help me to figure it out? How can I export coverSrc property from an array of objects?</p>