Django back end to serve a react front end images-CodePudding

I am working in a project with a django back and a react front. I am stuck on displaying images on react front.

The url served in my react console is : http://localhost:8000/media/media/images/cards/card1.jpg When I load this url in a new chrome the page the image is displayed however in my react page the image is blank.

Here are my 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/'

Here is my serializer :

class StartupSerializer(serializers.ModelSerializer):

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

And here is my model :

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

Please not on recat side the axios works fine and I can get all other fields my problem is only with the image display.

I ham also wondering why the URL is having /media/media I could not figure out where I am duplicating the media path. Please note I am using postgres database to store data.

Here is my front parent component :

import React from 'react';
import CardComponent from './CardComponent';
import { Grid } from '@material-ui/core';
import { Link } from 'react-router-dom';
import { useState, useEffect } from 'react';
import StartUpService from './../Services/StartUpService';

const CardList = () => {
  const [startup, setstartups] = useState([]);

  const retrieveTutorials = () => {
    StartUpService.getAll()
      .then((response) => {
        const myData = response.data;
        setstartups(myData);
        console.log(myData);
      })
      .catch((e) => {
        console.log(e);
      });
  };

  useEffect(() => {
    retrieveTutorials();
  }, []);
  console.log("sttart up is "   startup)
  return (
    <div className="card list">
      <Grid container spacing={4}>
        
        {startup.map((startups) => (
          <Grid key={startups.id} item xs={4}>
            <Link to={{ pathname: `product/${startups.id}` }}>
              <CardComponent
                className="cards"
                key={startups.id}
                id={startups.id}
                image={startups.image}
                header={startups.header}
                title={startups.title}
                category={startups.category}
                summary={startups.summary}
              />
            </Link>
          </Grid>
        ))}
      </Grid>
    </div>
  );
};

export default CardList;

CodePudding user response：

Your image field name is card_image and not image, therefore :

          <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>