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 для хранения данных.
Имя вашего поля изображения - card_image, а не image, поэтому :
<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>