时间戳

首页 > 解决方案 > 尝试加载图像时写入 {% load static %} 时出现语法错误

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

问题描述

您好，我正在用 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 %}
           |                      ^

标签： javascripthtmlnode.jsreactjsdjango

解决方案

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

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

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

推荐阅读