Carregando Imagem em um aplicativo Reagir + Django

Então eu tenho um pequeno projeto escrito em python / django para o backend e reajo ao frontend. Eu segui o tutorial de: http://geezhawk.github.io/using-react-with-django-rest-framework

Eu quero mostrar uma imagem para o logotipo do projeto, a compilation do webpack foi um sucesso, mas no entanto, a imagem não pode carregar quando vejo a página, eu suponho que é porque a URL compilada da imagem não pode ser resolvida de urls do django, e também acessando o url para isso basta carregar a mesma página de índice ….

Neste ponto, não tenho certeza de como posso corrigi-lo, mas ficaria muito grato se alguém pudesse me apontar um código de exemplo de como fazer isso, como carregar a imagem em um projeto react + django.

Editar
Estrutura do projeto

project |- api | |- models.py | |- serializers.py | |- views.py |- assets | |- bundles | |- js |- node_modules |- project | |- settings.py | |- static | |- urls.py |- templates | |- index.html 

E dentro do urls.py

  url(r'^$', TemplateView.as_view(template_name='index.html')) 

e aqui está o meu index.html

 {% load render_bundle from webpack_loader %}    Hello React   
{% render_bundle 'main' %}

e aqui é onde eu estou tentando carregar uma imagem no meu JS

 import React from 'react' import logo from './resources/logo.jpeg' class Header extends React.Component { render() { return (  ) } } 

Eu me deparei com o mesmo problema que você está enfrentando quando eu estava construindo um front-end de reação, django backend single-page-app. A questão é que o webpack controla as importações no código JS e quer gerenciar a localização dos arquivos estáticos, mas o django é quem hospeda o site e, portanto, os arquivos estáticos.

A maneira como trabalhamos em torno disso é não importar as imagens no javascript, mas, em vez disso, colocar o caminho do URL na imagem que aponta para o local onde ele está sendo hospedado pelo django.

Depois de olhar para o tutorial que você vinculou, acredito que você deve fazer as seguintes adições ao seu aplicativo django:

  • Adicione STATIC_URL = '/static/' ao seu STATIC_URL = '/static/' settings.py
  • Coloque o logo.jpeg e as imagens subseqüentes em sua pasta assets/ ou adicione a pasta resources/ folder à variável STATICFILES_DIR em settings.py como tal (supondo que os resources estejam no diretório de nível superior do seu projeto):

     STATICFILES_DIRS = ( #This lets Django's collectstatic store our bundles os.path.join(BASE_DIR, 'assets'), os.path.join(BASE_DIR, 'resources'), ) 

Agora, você deve ser capaz de acessar a imagem (se você fizer o django admin.py runserver ) indo para 127.0.0.1:8000/static/logo.jpeg. Dentro do HTML / JS, o URL para a imagem é simplesmente "/static/logo.jpeg" já que no navegador ele resolverá isso para o URL inteiro.

Portanto, agora se você tem uma imagem que você colocou em sua pasta assets ou resources com um caminho dentro da pasta "path/to/image.jpeg" , então o URL para colocar como src da imagem em seu código de resposta é "/static/path/to/image.jpeg" (o / no começo é muito importante para garantir que ele faz o URL absoluto). Assim, você pode alterar sua class de header para ser:

 import React from 'react' class Header extends React.Component { render() { return (  ) } } 

Isso deve funcionar desde que você hospede seus arquivos estáticos através do Django.