在React + Django应用中加载图像

小编典典

在React + Django应用中加载图像

reactjs

所以我有一个用python /
django编写的小项目用于后端，并对前端进行响应。我遵循以下教程：http : //geezhawk.github.io/using-react-with-
django-rest-framework

我想显示一个用于项目徽标的图像，Webpack构建成功，但是，当我看到页面时，该图像无法加载，我想这是因为无法从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>
    )
  }
}

阅读 344

2020-07-22

共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'),
```
)

现在，您应该可以通过访问django admin.py runserver127.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"（开头的/非常重要以确保它具有绝对网址）。因此，您可以将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托管静态文件，此方法就可以正常工作。

2020-07-22