Загрузка изображения в приложение React + Django

91
15

Итак, у меня есть небольшой проект, написанный на 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>
)
}
}

спросил(а) 2021-01-19T11:55:44+03:00 6 месяцев, 1 неделя назад
1
Решение
78

Я столкнулся с той же проблемой, с которой вы столкнулись, когда я создавал интерфейс для взаимодействия, 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.

ответил(а) 2021-01-19T11:55:44+03:00 6 месяцев, 1 неделя назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема