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

Question

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

我想为项目的logo展示一张图片，webpack构建成功，但是当我看到页面时图片无法加载，我想是因为图片的编译URL无法从 django 的 url 中解析，并且访问它的 url 只需加载相同的索引页面....

在这一点上，我不确定如何修复它，但如果有人能指出如何做到这一点的示例代码，如何在 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

我在构建 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'), 
  )
  

现在，您应该可以通过转到 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 托管静态文件，这应该可以工作。