在React Django应用程序中加载图像

发布时间：2020-12-16 22:29:17 所属栏目：Python 来源：网络整理

导读：所以我有一个用python / django编写的小项目用于后端并为前端做出反应.我按照教程：http://geezhawk.github.io/using-react-with-django-rest-framework 我想显示项目徽标的图像,webpack构建成功,但是,当我看到页面时图像无法加载,我想这是因为图像的编译URL

所以我有一个用python / django编写的小项目用于后端并为前端做出反应.我按照教程：http://geezhawk.github.io/using-react-with-django-rest-framework

我想显示项目徽标的图像,webpack构建成功,但是,当我看到页面时图像无法加载,我想这是因为图像的编译URL无法从django的网址,也访问网址只是加载相同的索引页….

在这一点上,我不确定如何解决它,但如果有人能指出我如何执行此操作的示例代码,如何在react django项目中加载图像,我将不胜感激.

编辑
项目结构

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 %}


这是我正在尝试在我的JS中加载图像的地方

import React from 'react'
import logo from './resources/logo.jpeg'

class Header extends React.Component {
  render() {
    return (


最佳答案
当我构建一个反应前端,django后端单页面应用程序时,我遇到了你遇到的同样问题.问题是webpack控制JS代码中的导入并希望管理静态文件的位置,但django是托管网站的那个,因此是静态文件.
我们解决这个问题的方法是不在javascript中导入图像,而是将url路径放到指向django托管它的位置的图像上.
在查看您链接的教程后,我相信您应该对您的django应用程序进行以下添加：
>将STATIC_URL =’/ static /’添加到settings.py中
>将logo.jpeg和后续图像放在您的assets /文件夹中,或者将resources /文件夹添加到settings.py中的STATICFILES_DIR变量中(假设资源位于项目的顶级目录中)：

STATICFILES_DIRS = (
    #This lets Django's collectstatic store our bundles
    os.path.join(BASE_DIR,'assets'),os.path.join(BASE_DIR,'resources'),)

现在,您应该能够访问127.0.0.1:8000/static/logo.jpeg来访问该映像(如果您执行django admin.py runserver).在HTML / JS中,图像的URL只是“/static/logo.jpeg”,因为在浏览器中它将解析为整个URL.
因此,现在如果你有一个图像放在你的资产或资源文件夹中,路径在“path / to / image.jpeg”文件夹中,那么在反应代码中作为图像的src放置的URL是“/static/path/to/image.jpeg”(开头的/非常重要,以确保它执行绝对URL).因此,您可以将Header类更改为：

import React from 'react'

class Header extends React.Component {
  render() {
    return (
      
只要您通过Django托管您的静态文件,这应该可以正常工作.

                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!