Как вывести изображение из API, возвращающего местоположение файла Django/React

Я создаю веб-приложение для электронной коммерции с Django в качестве бэкенда и React frontend. Я столкнулся с проблемой, как отображать изображения, сохраненные локально на моей машине (через путь к файлу) в react. Мой API передает путь к изображению, но мое приложение React не может получить доступ к фотографии. Есть идеи, как заставить изображения отображаться?

У меня есть изображение, сохраненное через мою модель Django в поле imagefield.

Вот как я обращаюсь к API в react

import React, {useState, useEffect} from 'react'
import ListItem from '../components/ListItem'
import {Container} from 'react-bootstrap'

const ItemsListPage = () => {
    let [items, setItems] = useState([])
    useEffect(()=> {
        getItems()
    },[])

    //function to ping API for list of store items from django backend
    let getItems = async () => {
       let response = await fetch('/api/items')
       let data = await response.json()
       console.log('DATA:', data)
       setItems(data)
    } 


  return (
    <div>
    <Container>
        <div className='styles.grid'>
            {items.map((item, index) => 
            <ListItem key={index} item={item}/>
            )}
        </div>
    </Container>
    </div>
  )
}

export default ItemsListPage

Это моя модель django

from django.db import models
from PIL import Image

# Create your models here.
class StoreItems(models.Model):
    name = models.CharField(max_length=20)
    price = models.DecimalField(max_digits= 10, decimal_places=2)
    color = models.CharField(max_length=20, blank=True)
    description = models.TextField(null=True, blank=True)
    image = models.ImageField(default='default.png', upload_to='./product_pics')
    updated = models.DateTimeField(auto_now=True)
    created = models.DateTimeField(auto_now_add=True)

Это ответ моего API

 HTTP 200 OK
Allow: OPTIONS, GET
Content-Type: application/json
Vary: Accept

[
    {
        "id": 1,
        "name": "F1 Mercedes Shirt",
        "price": "75.99",
        "color": "black",
        "description": "Officially licensed Mercedes-AMG Petronas F1 shirt as worn on grid by the team.",
        "image": "/media/default.png",
        "updated": "2022-05-29T17:34:19.347175Z",
        "created": "2022-05-29T17:31:36.784720Z"
    },
    {
        "id": 2,
        "name": "MacBook Pro",
        "price": "1500.00",
        "color": "Silver",
        "description": "2022 Mac Book Pro '13 Inch display with touchbar",
        "image": "/media/default.png",
        "updated": "2022-05-29T17:34:53.392357Z",
        "created": "2022-05-29T17:34:53.392395Z"
    },
    {
        "id": 3,
        "name": "Mercedes F1 Hat",
        "price": "50.00",
        "color": "blue",
        "description": "Special edition blue Mercedes F1 hat for Miami grand prix",
        "image": "/media/default.png",
        "updated": "2022-05-31T18:00:49.880057Z",
        "created": "2022-05-31T18:00:49.880122Z"
    }
]

Я думаю, что я, должно быть, что-то упускаю в том, как это делается, я добился загрузки изображений ранее в полностековом приложении django.

* Очевидно, что "продукты" для этого сайта защищены авторским правом, это личный проект.

Я разобрался со своей проблемой, я забыл добавить статический путь к моей странице urls.py

if settings.DEBUG:
    urlpatterns +=static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
Вернуться на верх