Загрузка изображения в приложение React + Django
Итак, у меня есть небольшой проект, написанный на python/django для бэкэнд и реагирующий на интерфейс. Я следовал учебнику: http://geezhawk.github.io/using-react-with-django-rest-framework
Я хочу показать изображение для логотипа проекта, сборка webpack была успешной, но, однако, изображение не могло загрузиться, когда я вижу страницу, я полагаю, это связано с тем, что скомпилированный URL-адрес изображения не мог быть разрешенными из URL-адресов django, а также получить доступ к URL-адресу для его загрузки одной и той же индексной страницы....
В этот момент я не уверен, как я могу это исправить, но я был бы более чем благодарен, если бы кто-нибудь мог указать мне пример кода, как это сделать, как загрузить изображение в проекте реакции + django.
Edit
Структура проекта
project
|- api
| |- models.py
| |- serializers.py
| |- views.py
|- assets
| |- bundles
| |- js
|- node_modules
|- project
| |- settings.py
| |- static
| |- urls.py
|- templates
| |- index.html
И внутри urls.py
url(r'^$', TemplateView.as_view(template_name='index.html'))
и вот мой index.html
{% load render_bundle from webpack_loader %}
<!DOCTYPE html>
<html>
<head>
<title>Hello React</title>
</head>
<body>
<div id="content"></div>
{% render_bundle 'main' %}
</body>
</html>
и вот где я пытаюсь загрузить изображение в моем JS
import React from 'react'
import logo from './resources/logo.jpeg'
class Header extends React.Component {
render() {
return (
<nav className="navbar navbar-expand-md fixed top bg-dark navbar-dark">
<a className="navbar-brand" href="#">
<img src={logo} width="30" height="30" className="d-inline-block align-top" alt="" />
Project Name
</a>
</nav>
)
}
}
Я столкнулся с той же проблемой, с которой вы столкнулись, когда я создавал интерфейс для взаимодействия, django backend single-page-app. Проблема в том, что webpack контролирует импорт в JS-коде и хочет управлять расположением статических файлов, но django - это тот, на котором размещен веб-сайт, и, таким образом, статические файлы.
То, как мы работали над этим, - это не импортировать изображения в javascript, а вместо этого указывать путь URL-адреса к изображению, указывающий на место, где он размещается django.
После просмотра учебника, с которым вы связались, я считаю, что вы должны внести следующие дополнения в свое приложение django:
- Добавьте
STATIC_URL = '/static/' в ваш settings.pyЛибо поместите файл logo.jpeg и последующие изображения в свою папку assets/ или добавьте папку resources/ в переменную STATICFILES_DIR в settings.py как таковой (предполагая, что ресурсы находятся в верхнем указателе уровня ваш проект):
STATICFILES_DIRS = (
#This lets Django collectstatic store our bundles
os.path.join(BASE_DIR, 'assets'),
os.path.join(BASE_DIR, 'resources'),
)
Теперь вы должны иметь доступ к изображению (если вы делаете django admin.py runserver), перейдя на 127.0.0.1:8000/static/logo.jpeg. В HTML/JS URL-адрес изображения просто "/static/logo.jpeg", так как в браузере он разрешает это для всего URL-адреса.
Таким образом, теперь, если у вас есть образ, который вы поместили в папку с вашими ресурсами или ресурсами с помощью пути в папке "path/to/image.jpeg", тогда URL-адрес, который будет помещен как src изображения в ваш код реакции, будет "/static/path/to/image.jpeg" (начало/начало очень важно для обеспечения абсолютного URL-адреса). Таким образом, вы можете изменить класс заголовка следующим образом:
import React from 'react'
class Header extends React.Component {
render() {
return (
<nav className="navbar navbar-expand-md fixed top bg-dark navbar-dark">
<a className="navbar-brand" href="#">
<img src={"/static/logo.jpeg"} width="30" height="30" className="d-inline-block align-top" alt="" />
Project Name
</a>
</nav>
)
}
}
Это должно работать так долго, как ваш хост ваши статические файлы через Django.
