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

Question

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

pythondjangoreactjswebpack

11

我有一个用Python/Django作为后端和React作为前端的小项目。我遵循了这个教程的指导：http://geezhawk.github.io/using-react-with-django-rest-framework

我想展示项目的标志性图片，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>
    )
  }
}

- bman765

你的项目结构是什么？前端是在Django服务器上托管还是在Node.js服务器上托管？ - Tamir Kfir

请问您能否包含（HTML）模板，其中请求图像以及该图像的目录结构和任何设置的代码段，这些设置涉及静态文件吗？ - Stefan Collier

@TamirKfir 它正在同一台 Django 服务器上托管... 把它放在另一个 Node.js 服务器上会更好吗？ - bman765

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rohan Varma · Accepted Answer

在构建一个使用React作为前端，Django作为后端的单页应用时，我遇到了你正在遇到的同样问题。问题在于Webpack控制JS代码中的导入，并希望管理静态文件的位置，但是Django托管网站和静态文件。

我们解决这个问题的方法是不在JavaScript中导入图像，而是将指向Django托管位置的图像的URL路径放入其中。

经过查看您提供的教程，我认为您应该对Django应用程序进行以下添加：

在settings.py中添加STATIC_URL = '/static/'
将logo.jpeg和随后的图像放在assets/文件夹中，或者将resources/文件夹添加到settings.py中的STATICFILES_DIR变量中，如下所示（假设resources位于项目的顶级目录）：
```
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"，那么在你的React代码中作为图片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 托管静态文件，这应该就可以正常工作。