我想显示项目徽标的图像,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 %} <!DOCTYPE html> <html> <head> <title>Hello React</title> </head> <body> <div id="content"></div> {% render_bundle 'main' %} </body> </html>
这是我正在尝试在我的JS中加载图像的地方
import React from 'react' import logo from './resources/logo.jpeg' class Header extends React.Component { render() { return ( <nav className="navbar navbar-expand-md fixed top bg-dark navbar-dark"> <a className="navbar-brand" href="#"> <img src={logo} width="30" height="30" className="d-inline-block align-top" alt="" /> Project Name </a> </nav> ) } }
我们解决这个问题的方法是不在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 ( <nav className="navbar navbar-expand-md fixed top bg-dark navbar-dark"> <a className="navbar-brand" href="#"> <img src={"/static/logo.jpeg"} width="30" height="30" className="d-inline-block align-top" alt="" /> Project Name </a> </nav> ) } }
只要您通过Django托管您的静态文件,这应该可以正常工作.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。