如何使用django从javascript函数加载静态文件中的图像

时间:2016-06-22 14:13:20

标签: javascript django

我在尝试从静态文件中获取图片时遇到问题,但是从javascript中获取。

这是我的javascript代码:

<script type="text/javascript">
    var url_1 = '{% static "assets/img/stolovi/2.jpg" %}';

    function addimage1() {
        var img = document.createElement("img");
        img.src = url_1;
        img.height = 50;
        img.width = 50;
        img.draggable = true;
        //optionally set a css class on the image
        var class_name = "foo";
        img.setAttribute("class", class_name);

        document.getElementById("myDiagramDiv").appendChild(img);
        //document.body.appendChild(img);
        $(img).draggable({containment:'#myDiagramDiv'});
        }
</script>

如何在addimage1函数中获取该图片并将其设置为img.src?

我的脚本标记位于html标记内,我不知道这是否很重要。

1 个答案:

答案 0 :(得分:1)

因此,在大多数情况下,您的代码工作正常。我认为您尝试使用的库可能有问题。这是一个类似的工作示例。

https://jsfiddle.net/chrshawkes/4eaqpdsn/

<div id="myImage">

</div>

<script>
var url_1 = 'https://www.gravatar.com/avatar/1d42ea6e005a4160211f7b1957ce0a09/?default=&s=64';

function addimage1() {
  var img = document.createElement("img");
  img.src = url_1;
  img.height = 50;
  img.width = 50;
  //optionally set a css class on the image
  var class_name = "foo";
  img.setAttribute("class", class_name);

  document.getElementById("myImage").appendChild(img);
}

addimage1();
</script>