Question

下面我在我的Django应用程序中有一个非常基本的反应结构示例。我如何在React组件中引用静态文件？我试图在反应中制作标题，并想知道是否可以在Component中显示图像。

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'))

Answer 1

您需要手动添加静态路径或通过java脚本标记变量发送路径。

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

在React组件中使用Django静态文件

1 个答案: