bma*_*765 6 python django reactjs webpack
所以我有一个用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 %}
<!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>
)
}
}
我遇到了与您在构建 React 前端、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'),
)
现在，您应该能够django admin.py runserver通过转到 127.0.0.1:8000/static/logo.jpeg来访问图像（如果您这样做）。在 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 托管您的静态文件，这应该有效。
| 归档时间： |
|
| 查看次数： |
2959 次 |
| 最近记录： |