Как вывести изображение из 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)