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

发布时间：2020-12-15 05:28:03 所属栏目：百科来源：网络整理

导读：所以我有一个用 python / django编写的小项目用于后端并为前端做出反应.我按照教程： http://geezhawk.github.io/using-react-with-django-rest-framework 我想显示项目徽标的图像,webpack构建成功,但是,当我看到页面时图像无法加载,我想这是因为图像的编译U

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

当我构建一个反应前端,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托管您的静态文件,这应该可以正常工作.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!