在React + Django應用程序中加載圖像

Question

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

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

現在，您應該能夠訪問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托管您的靜態文件，這應該可以正常工作。

在React + Django應用程序中加載圖像

問題描述

1 個解決方案

解決方案1
3 已采納 2018-01-17 04:20:45

在React + Django應用程序中加載圖像

問題描述

1 個解決方案

解決方案1 3 已采納 2018-01-17 04:20:45

解決方案1
3 已采納 2018-01-17 04:20:45