Question

所以我有一个用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>
    )
  }
}

Answer 1

当我构建一个反应前端，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是{ {1}}（开头的/非常重要，以确保它执行绝对URL）。因此，您可以将Header类更改为：

"/static/path/to/image.jpeg"

只要您通过Django托管静态文件，这应该可以正常工作。

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

1 个答案: