所以我有一个用python / django编写的小项目用于后端并为前端做出反应.我按照教程：http://geezhawk.github.io/using-react-with-django-rest-framework
我想显示项目徽标的图像,webpack构建成功,但是,当我看到页面时图像无法加载,我想这是因为图像的编译URL无法从django的网址,也访问网址只是加载相同的索引页….
在这一点上,我不确定如何解决它,但如果有人能指出我如何执行此操作的示例代码,如何在react django项目中加载图像,我将不胜感激.
编辑
项目结构
@H_301_13@project |- api | |- models.py | |- serializers.py | |- views.py |- assets | |- bundles | |- js |- node_modules |- project | |- settings.py | |- static | |- urls.py |- templates | |- index.html
在urls.py里面
@H_301_13@ url(r'^$',TemplateView.as_view(template_name='index.html'))
这是我的index.html
@H_301_13@{% load render_bundle from webpack_loader %}
这是我正在尝试在我的JS中加载图像的地方
@H_301_13@import React from 'react' import logo from './resources/logo.jpeg' class Header extends React.Component { render() { return (
我们解决这个问题的方法是不在javascript中导入图像,而是将url路径放到指向django托管它的位置的图像上.
在查看您链接的教程后,我相信您应该对您的django应用程序进行以下添加：
>将STATIC_URL =’/ static /’添加到settings.py中
>将logo.jpeg和后续图像放在您的assets /文件夹中,或者将resources /文件夹添加到settings.py中的STATICFILES_DIR变量中(假设资源位于项目的顶级目录中)：
@H_301_13@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类更改为：
@H_301_13@import React from 'react' class Header extends React.Component { render() { return (
只要您通过Django托管您的静态文件,这应该可以正常工作.