Javascript 从React JS中的django rest加载图像

尝试在react js中获取存储在django模型中的图像

首先，我将react的图像上传到django rest并保存在一个模型中。它是这样保存的“/media/project_main image/newimage.jpg”。但现在我想从django获取这个图像，以便在标签中进行反应和显示，但它没有加载

设置.py

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

       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)

urlpatterns = [

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

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

型号.py

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

       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)

urlpatterns = [

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

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

url.py

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

       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)

urlpatterns = [

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

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

反应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"

//不显示任何内容
{this.state.project.main_image}//显示“/media/project_main image/newimage.jpg”

“/media/project\u main image/newimage.jpg”不起作用。它应该是一个完整的URL，例如“”

---

为此，您的服务器应返回完整的url，否则您可以使用/media/project\u main image/newimage.jpg预先绑定您的服务器地址。

键入

http://localhost/media/project_mainimage/newimage.jpg

是否进入地址栏？（使用你应用程序的正确端口）我看到了图像OK我现在明白了，我在src图像标签中添加了它现在工作了嗨，我现在也有同样的问题。你能解释一下你是如何将图像发送到后端的吗？不，以斜杠开头的URL是很好的。浏览器将使用与当前页面相同的协议和服务器。