如何在django模板中使用webpack加载的图像？

Question

我正在使用 Webpack 2 并使用 url-loader 来加载我的所有图片。在使用webpack之前，我使用了这样的静态模板标签：

<img src="{% static "img.png" %}" ... />

现在webpack将所有图像重命名为一些哈希和ext，如下所示：

img.png 变为 img-[somehash].png。 （我将其用于缓存失效）。

问题是如何在django模板中加载新图像（使用哈希）？

提前感谢。

Answer 1

如何在上下文数据中传递正确的路径？在Django视图中，您将上下文数据传递给模板。您可以使用正则表达式来查找带有哈希的文件名。假设您的图像位于名为STATIC_ROOT的变量所链接的目录中（所有静态文件所在的位置）。首先，您需要找到文件：

from yourproject.SETTINGS import STATIC_ROOT
all_files = os.listdir(STATIC_ROOT)

假设您想要的文件名称为picture.png，并且已更改为picture-asd12edaq.png然后，使用正则表达式或简单in运算符找到正确的文件名：

for file in all_files:
    if 'picture' in file and '.png' in file:
        context['src'] = file
        break

然后在模板中使用简单的<img src="{% static {{src}} %}" ... />