尝试加载图像时写入 {% load static %} 时出现语法错误答案

【问题标题】：Syntax error when writing {% load static %} when trying to load an image尝试加载图像时写入 {% load static %} 时出现语法错误
【发布时间】：2021-05-19 15:07:57
【问题描述】：

你好，我正在用 reactjs 和 django 做一个小项目，我需要从组件加载静态图像，我想做的是在渲染方法中添加 {% load static %}，但它是给我一个错误，我不知道为什么，因为我把它写在我的主要 index.html 中并且它没有给我任何错误！代码如下：

      import React, { Component } from 'react';



export default class TopBar extends Component {
constructor(props) {
    super(props);
   
   
}



 register(){

    var x = document.getElementById("login");
    var y = document.getElementById("register");
    var z = document.getElementById("joinBtn");
    x.style.left = "-400px";
    y.style.left = "50px";
    z.style.left = "110px";    
}

login(){
    console.log('I was triggered during render')
    var x = document.getElementById("login");
    var y = document.getElementById("register");
    var z = document.getElementById("joinBtn");
    x.style.left = "50px";
    y.style.left = "450px";
    z.style.left = "0px";  
}




render(){          

    return (
    <div class="hero">
        <div class="form-box">
            <div class="button-box">
                <div id="joinBtn"></div>
                <button type="button" class="toggle-btn" onClick={this.login}>Log In</button>
                <button type="button" class="toggle-btn" onClick={this.register}>Register</button>
            </div>
            <div class="social-icons">
                {% load static %}
                <img src="{% static 'images/fb.png' %}" alt ="fb"/>
                <img src="{% static 'images/google.png' %}" alt ="gg"/>
                <img src="{% static 'images/tt.png' %}" alt ="tt"/>
            </div>
            <form id = "login" class="input-group">
                <input type="e-mail" class="input-field" placeholder="E-mail" required/>
                <input type="password" class="input-field" placeholder="Password" required/>
                <input type="checkbox" class="check-box"/><span>Remember Password</span>
                <button type="submit" class="submit-btn" >Login</button>
            </form>
            <form id="register" class="input-group">
                <input type="text" class="input-field" placeholder="Username" required/>
                <input type="e-mail" class="input-field" placeholder="E-mail" required/>
                <input type="password" class="input-field" placeholder="Password" required/>
                <input type="checkbox" class="check-box"/><span>I agree to the terms & conditions</span>
                <button type="submit" class="submit-btn" >Register</button>
            </form>
        </div>
    </div>);

}

我得到的错误是：

           SyntaxError:       /Users/pedrogouveia/Project/Dev/today/frontend/src/components/Join.js: Unexpected token (48:21)


      > 48 |                     {% load static %}
           |                      ^

【问题讨论】：

请edit问题并包含（完整）错误。
@Wiliem 搞定了！！
但是您在 JavaScript 文件中执行此操作？您是否渲染 JavaScript 文件？
是的，我在其他 js 文件中渲染它

标签： javascript html node.js reactjs django

【解决方案1】：

您在 JavaScript 环境中使用 Django 模板语法。这会导致错误，因为你的 JS 环境不知道任何与 Django 相关的东西。

我的建议是先构建你的 JS 文件，然后插入你的 Django 特定语法。

或者，另一种可维护的方法是将您的 JS 和 Django 项目开发为独立项目，将 API 添加到 Django 应用并从 React 应用调用这些 API。

【讨论】：