title: How to display images from api in nextjs
body: <p>I am building an ecommerce store with django rest framework and nextjs as the frontend. Thee api has the product data and i want to show product data in nextjs. SO far i can only show the string characters but cannot show the images.  Here's my index.js file.What am i doing wrong?:</p>
  <pre><code>import react from 'react';
  import axios from 'axios';
  import 'bootstrap/dist/css/bootstrap.min.css';
  import Button from 'react-bootstrap/Button';
  import Container from 'react-bootstrap/Container';
  import Col from 'react-bootstrap/Col';
  import Card from 'react-bootstrap/Card';
  import Image from 'next/image';
  
  //images from the api in variables
  const image1 = 'http://localhost:8000/media/media/3_Tiny-glass-cup-of-espresso-coffee.jpg'
  const image2 = 'http://localhost:8000/media/media/americano.jpeg'
  const image3 = 'http://localhost:8000/media/media/banana.jpeg'
  const image4 = 'http://localhost:8000/media/media/bigbfast.jpeg'
  const image5 = 'http://localhost:8000/media/media/caffe_latte.jpeg'
  const image6 = 'http://localhost:8000/media/media/cappuccino.jpg'
  const image7 = 'http://localhost:8000/media/media/caramel-latte-image-square.jpg'
  const image8 = 'http://localhost:8000/media/media/choco_lava.jpeg'
  const image9 = 'http://localhost:8000/media/media/hot_tea.jpeg'
  
  function Page({stars}) {
      return (
        &lt;div&gt;
        {stars.map((post) =&gt; (
   &lt;Card style={{ width: '18rem',float:'right' }} key={post.id}&gt;
    &lt;img src={post.image} width='70' height='70'/&gt;
    &lt;Card.Body&gt;
      &lt;Card.Title&gt;{post.title}&lt;/Card.Title&gt;
      &lt;Card.Text&gt;
        {post.description}
      &lt;/Card.Text&gt;
      &lt;Button variant=&quot;primary&quot;&gt;Add to cart&lt;/Button&gt;
    &lt;/Card.Body&gt;
  &lt;/Card&gt;
        ))}
        &lt;/div&gt;
    )
  }
  Page.getInitialProps = async (ctx) =&gt; {
    const res = await fetch('http://localhost:8000/api/products')
    const json = await res.json()
    return { stars: json }
  }
  
  
  export default Page
  </code></pre>