Загрузить изображение из django rest в React JS

#javascript #python #reactjs #django-rest-framework #django-file-upload

#javascript #python #reactjs #django-rest-framework #django-загрузка файла

Вопрос:

Пытаюсь получить изображение, сохраненное в модели django, в react js

Сначала я загрузил изображение из react в django rest и сохранил его в модели.Оно сохранено вот так «/media/project_mainimage/newimage.jpg «.Но теперь я хочу получить это изображение из django для react и отобразить в теге, но оно не загружается.

Settings.py

            MEDIA_URL='/media/'
           MEDIA_ROOT=os.path.join(BASE_DIR, 'media')

Models.py

        description=models.CharField(max_length=600,blank=True,null=True)
       main_image=models.ImageField(upload_to='project_mainimage')
       videourl=models.CharField(max_length=450,blank=True,null=True)

Urls.py

 urlpatterns = [

url('admin/', admin.site.urls),
url(r'^portfolio/', include('PortfolioApp.urls')),

   ]  static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Компонент React Js:

     <img  src={this.state.project.main_image} width="184" height="40" 
    alt="Project image"/>  // shows nothing
    <h1>{this.state.project.main_image}</h1> // shows "/media/project_mainimage/newimage.jpg"

1. Что вы видите, когда вводите http://localhost/media/project_mainimage/newimage.jpg в адресную строку? (используя правильный порт вашего приложения)

2. Я вижу изображение

3. Хорошо, теперь я понимаю, я добавил localhost в тег изображения src, теперь он работает

4. ПРИВЕТ, у меня такая же проблема прямо сейчас. Может быть, вы можете объяснить, как вы отправляете изображение на серверную часть?

Ответ №1:

«/media/project_mainimage/newimage.jpg » не работает. Это должен быть полный URL, например «https://localhost/media/project_mainimage/newimage.jpg«

Для этого ваш сервер должен вернуть полный URL, в противном случае вы можете предварительно связать адрес вашего сервера с /media/project_mainimage/newimage.jpg .