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

Question

我在尝试从我的静态文件中获取图片时遇到了问题，但这是从 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？

我的 Script 标签在 html 标签内，我不知道这是否重要。

Answer 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>