时间戳

首页 > 解决方案 > 将图像从 Django 数据库显示到 React JS 前端

javascript - 将图像从 Django 数据库显示到 React JS 前端

问题描述

我遇到了一个问题，我上传到 Django 数据库的图像没有显示到 React JS 前端。我创建了这个模型：

class Project(models.Model):
    title = models.CharField(max_length=100, null=False)
    description = models.CharField(max_length=10000, null=False)
    thumbnail = models.ImageField(upload_to='images/', null=False)

我已经序列化了它和所有这些。然后，我通过转到可以查看数据库的 /admin url 将该信息上传到数据库。之后，我对数据库进行 api 调用并获取所有数据。现在这就是问题发生的地方。我将该数据移动到 useState([]) 中，然后映射该状态。标题和描述确实会显示在屏幕上，但图像不会。这是我映射 useState([]) 的代码：

{projData.map(data => (
     <div key={data.id}>
          <img className="thumbnail" src={data.thumbnail}/>
          <span className="title">{data.title}</span>
          <p className="description">{data.description}</p>
     </div>
))}

所以就像我说的，标题和描述确实被成功调用，但这是我为图像得到的错误：

[错误] 无法加载资源：http: //127.0.0.1 :8000/images/background.png服务器响应状态为 404（未找到）（background.png，第 0 行）

图像确实被移动到图像文件夹中。但由于某种原因，它不会显示在实际的网站中。我能做些什么？

标签： javascriptpythonreactjsdjangodatabase

解决方案

您必须配置您的媒体根目录，将其添加到您的设置文件中

STATICFILES_DIRS=[
    os.path.join(BASE_DIR,"assets")
]
STATIC_ROOT=os.path.join(BASE_DIR,"static_cdn","static_root")
MEDIA_URL='/media/'
MEDIA_ROOT=os.path.join(BASE_DIR,"static_cdn","media_root")

assets 文件夹是您在本地存储文件的位置，您可以跳过它，因为它与您的问题无关。静态根目录是css和java脚本之类的文件，媒体根目录是图片之类的文件，然后添加到您的url文件中

if settings.DEBUG:
    urlpatterns = urlpatterns + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
    urlpatterns = urlpatterns + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

并且不要忘记再次上传图像以存储在媒体根目录中。现在您可以在前端访问您的媒体文件，请参阅此获取更多信息 https://docs.djangoproject.com/en/3.2/howto/static-files/

推荐阅读