如何使用对 Django 模板的静态文件引用注入 HTML 代码

Question

我有一个简单的用例，我需要将行动态添加到 HTML 模板中的表中。 我正在使用以下 javascript 代码在单击按钮时添加它：

function add_row(){
   row_html = '<tr><td><img src="path/to/my/file.png"></td></tr>'
   $('#table-id').append(row_html);
}

唯一的问题是找不到图像。 我也尝试过使用 Django 模板语言，不起作用。 一种解决方案是在我的 HTML 模板中的脚本标记中定义 src，就像在这个问题中一样。 但是我不确定这是最佳方法。

解决这个问题的正确方法是什么？

Answer 1

我不知道这是否可行，但尝试像这样首先创建一个变量，它将像这样获取当前的 URL

在第一次尝试这样之前，这比尝试另一个例子不起作用

let staticUrl = "{% static 'my/path/to/image/inside/static/folder' %}"

function add_row(){
       row_html = `<tr><td><img src=${staticUrl}></td></tr>`
       $('#table-id').append(row_html);
    }

---

let protocol = window.location.protocol //get protocol eg. http:
let hostname = window.location.hostname // get hostname eg. stackoverflow.com
let port = window.location.port // get port eg. 8000

注意：在生产中您不需要端口，因此在部署之前确保将其删除

let myUrl = protocol+hostname+port // this will return full URL
let staticUrl = "{% static 'my/path/to/image/inside/static/folder' %}"

function add_row(){
   row_html = `<tr><td><img src=${staticUrl}></td></tr>`
   $('#table-id').append(row_html);
}

让我知道这个是否奏效。 (: