[英]How to include Django static URL using JavaScript?
我有一个 django 应用程序，在数字海洋空间上存储 static 图像。 我可以通过执行以下操作轻松地在我的模板中显示这些 static 图像： <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 种方法来纠正这个问题，但它们看起来很老套。
<img id = 'my_image' hidden >{% static 'images/my_image.png' %}</img> for all the links I plan on using, then access this URL in the javascript using let URL = document.getElementById("my_image").innerHTML; . 这不会是更新的噩梦，但看起来很老套，必须是更好的方法。我还不能发表评论，但我是用 AWS 这样做的需要做的是生成一个 base64 图像 URL 并将该“复制”图像发送到前端，然后使用 JS 做任何你想让用户做的事情，即使你想修改图像，你总是可以保存图像为其原始名称并将“file_over_write”设置为True
如果您的 Django 在端口 8000 上运行，请使用
http://localhost:8000/static/images/my_image_2.png
您所有的 static 文件都使用baseurl/static/{your file path}
阅读您的问题后，我的第一个想法是简单的 javascript 对于 web 交互性非常有限
您可能会通过导入像 vuejs 这样的框架找到更好的解决方案。
一般来说， Vuejs 条件渲染可以提供更快更干净的 javascript 解决方案
要开始在 HTML 文件中使用 vuejs，您只需要插入这个
<script src="https://unpkg.com/vue/dist/vue.js"></script>在 HTML 文件中。
this is a quick sample of how you can isolate the URL data images from the code that displays the data, since the display code is isolated from the URL code, you can adjust the URL data to connect with 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>
另一种解决方案，我不确定它是否实用，或者它是否会适得其反，
但如果我有这个问题，我只会将图像移动到不同的存储，比如谷歌存储系统； 他们对每个集合都有细粒度的控制。
所以这取决于你想如何组织这些图像
我通过这样做解决了它：
document.getElementById(id+"dynamicImage").src = ("{% static 'images/my_image_2.png' %}").replace(/&/g, "&");
.replace(/&/g, "&")将替换所有& 与& 。 /和/g是替换所有的正则表达式。
为此，您可以将 static 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');
在上面的示例中，我使用 function getStatic在任何时候使用 javascript 检索 static 文件。 要更改图像，您只需检索另一个 URL 并将其设置为图像的源文件。
如何在模板中的 Django URL 中包含 JavaScript 变量？
[英]How to Include JavaScript variable in Django URL in template?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.