如何使用JavaScript包含Django静态URL

我有一个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' %}";

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

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

您可以看到，只要有&，它就会将amp;附加到它上面。正确的方法是什么？

我能想出两种方法来纠正这一点，但它们似乎很粗糙。

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

如果Django在8000端口上运行，请使用

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

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

我通过以下操作解决了问题：

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

.replace(/&/g, "&")将用&替换所有的&。/和/g是正则表达式，用于替换所有内容。

我还不能发表评论，但我用AWS是这样做的，所以现在是这样，如果这只是你想让用户看到的，你不必修改存储在数字海洋中的实际图像，你所需要做的就是生成一个base64图像URL并发送它；复制"；图像到前端，然后使用JS来做你想让用户做的任何事情，即使你想修改图像，你也可以随时将图像保存到它的原始名称，并设置"；file_over_write；至真实

要做到这一点，您可以将静态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对于web交互来说非常有限

导入vuejs这样的框架可能会找到更好的解决方案。

一般来说，Vuejs条件渲染可以提供更快、更干净的javascript解决方案

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

HTML文件中的CCD_ 17。

这是一个如何将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>

有关v-for指令语法的更多信息

另一个解决方案，我不确定它有多实用，或者它是否会对你的用例产生反作用，

但如果我有这个问题，我只会把图像移动到不同的存储系统，比如谷歌存储系统；他们对每个集合都有细粒度的控制。

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

相关内容

最新更新

热门标签：