Django后端提供反應前端影像

我正在一個帶有 django 后端和回應前端的專案中作業。我堅持在反應前端顯示影像。

我的反應控制臺中提供的 url 是： http://localhost:8000/media/media/images/cards/card1.jpg 當我在新的 chrome 中加載這個 url 時，頁面會顯示影像，但是在我的反應頁面中顯示影像是空白。

這是我的 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 資料庫來存盤資料。

這是我的前父組件：

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;

uj5u.com熱心網友回復：

您的影像欄位名稱是 card_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>

標籤：反应 姜戈

上一篇：在帶有React的Chartjs2.9.x中使用chartjs-plugin-annotation0.5.7

下一篇：useEffect只更新useState一次