Django back end для обслуживания изображений react front end

Я работаю в проекте с django back и react front. Я застрял на отображении изображений на react front.

В моей консоли react используется следующий url: http://localhost:8000/media/media/images/cards/card1.jpg. Когда я загружаю этот url на новую страницу в хроме, изображение отображается, однако на моей странице react изображение пустое.

Вот мои настройки django settings.py :

# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent
#Directories
PROJECT_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

MEDIA_ROOT = os.path.join(BASE_DIR)
MEDIA_URL = '/media/'

Вот мой сериализатор :

class StartupSerializer(serializers.ModelSerializer):

    class Meta:
        model = Startup
        fields = ('id', 'header', 'title', 'category', 'description', 'tags' , 'card_image' , 
        'logo_image')

А вот моя модель :

class Startup(models.Model):
    header = models.CharField("Header", max_length=255, null=False)
    title = models.CharField("Title", max_length=255, null=False)
    category = models.CharField("category", max_length=255, null=False)
    description = models.CharField("description", max_length=255, null=False)
    # TODO Change this to options instead of array
    tags = ArrayField(models.CharField(max_length=10, blank=True), size=5,)
    # TODO Images to be stored in aws only url will be in DB
    card_image = models.ImageField(upload_to='media/images/cards', null=False)
    logo_image = models.ImageField(upload_to='media/images/logos', null=False)
    createdAt = models.DateTimeField("Created At", auto_now_add=True)

    def __str__(self):
        return self.title

Пожалуйста, не на стороне recat axios работает нормально и я могу получить все другие поля моя проблема только с отображением изображения.

Мне также интересно, почему URL имеет /media/media Я не смог понять, где я дублирую путь к медиа. Обратите внимание, я использую базу данных postgres для хранения данных.

          <Grid key={startups.id} item xs={4}>
            <Link to={{ pathname: `product/${startups.id}` }}>
              <CardComponent
                className="cards"
                key={startups.id}
                id={startups.id}
                image={startups.card_image} // change here 
                header={startups.header}
                title={startups.title}
                category={startups.category}
                summary={startups.summary}
              />
            </Link>
          </Grid>