Как отобразить изображения в React из Django Rest API?

Я хочу отправлять изображения из папки django media в react front end. И представление, которое я создаю, работает, когда я перехожу к Url 'api/id/1', изображение отображается, но когда я хочу открыть его в моем приложении react под loacalhost:8000, изображение не отображается

вид

class PNGRenderer(renderers.BaseRenderer):
    media_type = 'image/png'
    format = 'png'
    charset = None
    render_style = 'binary'

    def render(self, data, media_type=None, renderer_context=None):
        return data


class ImageAPIView(generics.RetrieveAPIView):

    queryset = Images.objects.filter(id=1)
    renderer_classes = [PNGRenderer]

    def get(self, request, *args, **kwargs):
        renderer_classes = [PNGRenderer]
        queryset = Images.objects.get(id=self.kwargs['id']).image
        data = queryset
        return Response(data, content_type='image/png')

вызов API

export function apiImage(image,callback) {
    const endpoint = `id/${image}`
    backendlookup('GET', endpoint ,callback)  
}

function App() {
  const classes = useStyles()
  
  

  const handleLookup = (response, status) => {
    if (status === 200) {
        console.log(response)
    }
  }
    
      

  const [img, setImg]=useState(apiImage(2,handleLookup))
  
  const ImgChange =(e) =>{
    if(e === 'laugh'){
      setImg(Trainer_Laugh)
    }
    if(e === 'smile'){
      setImg(Trainer_Smile)
    }
  }

  return (
    
      <Grid container display="flex" direction="column" justifyContent="center" alignItems="center" className={classes.grid}>
          <img src={img} alt='girl' className={classes.img}/> 
            <Paper className={classes.paper} >
              <Textfield handleWaifuChange={ImgChange}/>
            </Paper>
      </Grid>
    
  );
}

export default App;

Проблема в том, что вы возвращаете undefined из функции, которая вызывает API

export function apiImage(image,callback) {
    const endpoint = `id/${image}`
    backendlookup('GET', endpoint ,callback)  
}

Вам нужно вернуться

export function apiImage(image,callback) {
    const endpoint = `id/${image}`
    return backendlookup('GET', endpoint ,callback)  
}

Кроме того, вызов API должен быть асинхронным. Таким образом, вместо результата вы получите объект promise pending в своем состоянии.

const [img, setImg]=useState(apiImage(2,handleLookup))

Перед заполнением состояния необходимо дождаться результата. Вы можете сделать это следующим образом

import React, { useEffect } from 'react';

function App() {
  const [img, setImg]=useState(null);

  useEffect(() => {
    fetchData();
  }, []);

  async fetchData() {
    const img = await apiImage(2,handleLookup);
    setImg(img);
  }

Если не работает, проверьте, правильно ли backendlookup отправляет запрос на сервер. Если снова не работает, проверьте API сервера, поместите соответствующий путь API в URI браузера и посмотрите, получите ли вы ожидаемый результат.

Подробнее об обещаниях можно прочитать здесь https://javascript.info/async А о React useEffect можно прочитать здесь https://reactjs.org/docs/hooks-effect.html

Вернуться на верх