python - 在 React+Django 应用程序中加载图像-6ren

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

转载作者：行者123 更新时间：2023-12-03 13:26:58

所以我有一个用 python/django 编写的小项目作为后端，并为前端使用react。我按照教程: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>
    )
  }
}

最佳答案

我在构建 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。

因此，现在如果您将图像放入 Assets 或资源文件夹中，且其路径位于 "path/to/image.jpeg" 文件夹内，则将 URL 设为React 代码中图像的 src 是 "/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 托管静态文件，这应该就可以工作。

关于python - 在 React+Django 应用程序中加载图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48239941/

文章推荐： reactjs - React，如何快速更新状态

文章推荐： android - install_referrer Intent 弃用和更新库

php - 在 PHP 中加/除数字
我正在开发一个需要能够平均三个数字的 Facebook 应用程序。但是，它总是返回 0 作为答案。这是我的代码: $y = 100; $n = 250; $m = 300; $number = ($y
javascript - 我需要将一个整数除以 12，如果结果是 float ，则在 javascript 中加 1
我只是无法弄清楚这一点，也找不到任何对我来说有意义的类似问题。我的问题:我从数据库中提取记录，并在我的网页上以每个面板 12 条的倍数显示它们。因此，我需要知道有多少个面板可以使用 JavaScrip

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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