Серверная часть Django для обслуживания изображений переднего плана react

#reactjs #django

Вопрос:

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

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

Вот мои джанго 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 для хранения данных.

Вот мой передний родительский компонент :

 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 = () =gt; {  const [startup, setstartups] = useState([]);   const retrieveTutorials = () =gt; {  StartUpService.getAll()  .then((response) =gt; {  const myData = response.data;  setstartups(myData);  console.log(myData);  })  .catch((e) =gt; {  console.log(e);  });  };   useEffect(() =gt; {  retrieveTutorials();  }, []);  console.log("sttart up is "   startup)  return (  lt;div className="card list"gt;  lt;Grid container spacing={4}gt;    {startup.map((startups) =gt; (  lt;Grid key={startups.id} item xs={4}gt;  lt;Link to={{ pathname: `product/${startups.id}` }}gt;  lt;CardComponent  className="cards"  key={startups.id}  id={startups.id}  image={startups.image}  header={startups.header}  title={startups.title}  category={startups.category}  summary={startups.summary}  /gt;  lt;/Linkgt;  lt;/Gridgt;  ))}  lt;/Gridgt;  lt;/divgt;  ); };  export default CardList;

1. Ваш бэкэнд выглядит нормально ,измените (‘upload_to=’медиа/изображения/логотипы») на ‘upload_to=’/изображения/логотипы’), чтобы отменить дублированный путь к мультимедиа, потому что корень вашего пути к мультимедиа уже определен «MEDIA_URL = ‘/media/'», проблема в вашем интерфейсе. Можете ли вы предоставить более подробную информацию ?

2. Конечно, я отредактирую вопрос, чтобы добавить детали спереди

Ответ №1:

Ваше имя поля изображения-card_image, а не изображение, поэтому :

 lt;Grid key={startups.id} item xs={4}gt;  lt;Link to={{ pathname: `product/${startups.id}` }}gt;  lt;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}  /gt;  lt;/Linkgt;  lt;/Gridgt;