2016-07-27 83 views
4

下面我在我的Django应用程序中有一个非常基本的反应结构示例。我将如何引用React组件中的静态文件?我试图做出反应的头,并想知道是否有可能从组件内显示图像。在React组件中使用Django静态文件

Logo.jsx

import React from "react" 

export default class Logo extends React.Component { 
    render() { 
    return (
     <a href="{% url 'index:landing_index' %}"><img src="{% static "img/logo.png" %}"></a> 
    ) 
    } 
} 

NavBarContainer.jsx

import React from "react" 
import Logo from "../components/Logo" 

export default class NavBarContainer extends React.Component { 

    render() { 
     return (
      <Logo /> 
    ) 
    } 
} 

NavBar.jsx

import React from "react" 
import { render } from "react-dom" 

import NavBarContainer from "./containers/NavBarContainer" 

class NavBar extends React.Component { 
    render() { 
    return (
     <NavBarContainer /> 
    ) 
    } 
} 

render(<NavBar />, document.getElementById('navbar')) 

回答

0

您将需要手动添加静态路径或经由一个发送路径java脚本标记变量。

<script> 
var static_root = {{ STATIC_URL }} 
</script>