如何使用 JavaScript 包含 Django static URL？

Question

我有一个 Django 应用程序在数字海洋空间上存储静态图像。我可以通过以下操作轻松地在我的模板中显示这些静态图像：<img>{% static 'images/my_image.png' %}</img>

如果我在加载后检查 HTML 页面，我会看到如下内容：

https://nyc3.digitaloceanspaces.com/nameofmyspace/nameofmyspace-space-static_DEV/images/my_image.png?AWSAccessKeyId=XXXXXXXXXXXXXX&Signature=XXXXXXXXXXXXXXXXXX%3D&Expires=1621600823

但现在我想使用 javascript 动态更改此图像。

所以我尝试了：

document.getElementById(id+"dynamicImage").src = "{% static 'images/my_image_2.png' %}";

几乎可以正常工作，但无法加载图像。原因是在检查 javascript 提供的 src 之后：

https://nyc3.digitaloceanspaces.com/nameofmyspace/nameofmyspace-space-static_DEV/images/my_image.png?AWSAccessKeyId=XXXXXXXXXXXXXX&Signature=XXXXXXXXXXXXXXXXXX%3D&Expires=1621600823

你可以看到任何有 & 的地方都会附加 amp;。正确的做法是什么？

我可以想出 2 种方法来纠正这个问题，但它们看起来很老套。

我可以将 URL 硬编码到 javascript 中，随着事情的变化，这将是一场更新的噩梦
我可以对我计划使用的所有链接执行 <img id = 'my_image' hidden >{% static 'images/my_image.png' %}</img>，然后使用 let URL = document.getElementById("my_image").innerHTML; 在 javascript 中访问此 URL。这将不再是更新的噩梦，但看起来很老套，而且一定是更好的方法。

Answer 1

我还不能发表评论，但我是用 AWS 这样做的，所以就在这里，如果这正是您希望用户看到的内容，您不必修改存储在中的实际图像数字海洋，您需要做的就是生成一个 base64 图像 URL 并将该“复制”图像发送到前端，然后使用 JS 执行您希望用户执行的任何操作，即使您希望修改图像，您可以随时将图像保存为其原始名称并将“file_over_write”设置为 True

Answer 2

如果您的 Django 运行在端口 8000 上使用

http://localhost:8000/static/images/my_image_2.png

您的所有静态文件都使用 baseurl/static/{your file path}

提供

Answer 3

阅读您的问题后我的第一个想法很简单javascript 网络交互性非常有限

引入vuejs等框架可能会找到更好的解决方案

一般来说，Vuejs conditional rendering 可以提供更快更清洁的 javascript 解决方案

开始在 HTML 文件中使用 vuejs 你只需要插入这个

<script src="https://unpkg.com/vue/dist/vue.js"></script> 在 HTML 文件中。

这是一个快速示例，说明如何将 URL 数据图像与显示数据的代码隔离开来，因为显示代码与 URL 代码隔离开来，您可以调整URL 连接 Django 的数据 settings.py

<meta charset="UTF-8">

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<html>

<style>
*{
  background-color:#e8eae6;
 
}
</style>


<div id="app">
    <h2>vuejs testing </h2>
    <div class="row">
        <img width="400px" height="400px" v-for="img in images" v-bind:src="img"/>
      </div>


   
</div>
  
  <script>


new Vue({
  el: '#app',
 
data() {
    return {
        images:["https://images.unsplash.com/photo-1534258915617-99d572d9f684?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=889&q=80", 
        "https://images.unsplash.com/photo-1559825481-12a05cc00344?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8d2F0ZXJ8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60",
        "https://images.unsplash.com/photo-1621786505687-9a36ca978b27?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80"
    ]
    }
}

});


  </script>


</html>

for more info about v-for directive syntax

另一个解决方案，我不确定它的实用性如何，或者它是否会对您的用例产生反作用，

但如果我遇到这个问题，我会将图像移动到不同的存储空间，例如每个集合的 google storage system; they have fine-grained control。

所以这取决于你想如何组织这些图像

Answer 4

我解决了这个问题：

document.getElementById(id+"dynamicImage").src = ("{% static 'images/my_image_2.png' %}").replace(/&amp;/g, "&");

.replace(/&/g, "&") 会将所有 & 替换为 &。 / 和 /g 是替换所有的正则表达式。

Answer 5

为此，您可以将静态 URL 设置为全局变量并稍后引用它。基本上：


// Initial setting of the global static URL
var staticURL = "{% static '' %}";

// Function to retrieve the full URL given the 
function getStatic (URL) {
    let fullURL = staticURL + '/' + URL;
    return fullURL;
};


// Example to get the URL of an image
document.getElementByID('image').src = getStatic('images/my_image');

在上面的示例中，我使用函数 getStatic 在任何时候使用 javascript 检索静态文件。要更改图像，您只需检索另一个 URL 并将其设置为图像的源文件。

如何使用 JavaScript 包含 Django static URL？

How to include Django static URL using JavaScript?

html

javascript

django

digital-ocean