如何在Django模板中显示图片？

0 投票

2 回答

80 浏览

提问于 2025-04-14 16:21

我在用Django开发一个项目。在模板中，我想放一张图片，如果用户想换照片，只需要点击已经显示的图片，这样就会打开文件浏览器，用户可以选择新的图片。然后，新的图片应该暂时替换掉旧的图片，在模板中显示出来。

程序确实打开了文件浏览器，我选择了新的图片，但旧的图片没有被替换，新的图片也没有在HTML的任何地方显示出来。我的代码是：

<script>

// Quando a imagem da pessoa for clicada
document.getElementById("imagem-pessoa").addEventListener('click', function() {
// Abrir o explorador de arquivos ao clicar no campo de arquivo oculto
document.getElementById("input-imagem").click();
});

// Quando uma nova imagem for selecionada
document.getElementById("input-imagem").addEventListener('change', function(event) {
// Capturar a nova imagem selecionada
const novaImagem = event.target.files[0];
// Atualizar temporariamente a imagem no HTML
const urlNovaImagem = URL.createObjectURL(novaImagem);
document.getElementById("imagem-pessoa").src = urlNovaImagem;
});
</script>

还有HTML部分：

<img class="rectangle" id="imagem-pessoa" src="{{ pessoa.imagem.url }}" alt="Imagem da Pessoa">>
<input type="file" id="input-imagem" style="display: none;" accept="image/*">

这个功能没有正常工作。

我期待的效果是：加载一个人员注册页面，输入一个号码后，它会在数据库中查找并返回一个人。然后，它会用从数据库表中找到的数据填充屏幕上的一些元素。在人员模型对象中，有一个模型字段是ImageField，用来存储每个人的照片。我需要的是：在HTML中展示与被搜索的人员（在人员表中）相关的图片，同时，如果用户想更换照片，只需点击已经显示的图片，就会打开文件浏览器，让用户选择新的图片。一旦选择了新的图片，新的图片应该暂时替换掉旧的图片显示在HTML中，但只有在用户点击提交按钮后，数据库中的照片才会被真正替换。

2 个回答

在index.html文件中试试这个代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img class="rectangle" id="imagem-pessoa" src="{{ pessoa.imagem.url }}" alt="Imagem da Pessoa">
<input type="file" id="input-imagem" style="display: none;" accept="image/*">

<script>

    // Quando a imagem da pessoa for clicada
    document.getElementById("imagem-pessoa").addEventListener('click', function() {
    // Abrir o explorador de arquivos ao clicar no campo de arquivo oculto
    document.getElementById("input-imagem").click();
    });
    
    // Quando uma nova imagem for selecionada
    document.getElementById("input-imagem").addEventListener('change', function(event) {
    // Capturar a nova imagem selecionada
    const novaImagem = event.target.files[0];
    // Atualizar temporariamente a imagem no HTML
    const urlNovaImagem = URL.createObjectURL(novaImagem);
    document.getElementById("imagem-pessoa").src = urlNovaImagem;
    });
    </script>
</body>
</html>

回答于 2025-04-14 由 Python大师

分享举报

我已经解决了这个问题。

要在Django的模板HTML中实现这个功能，可以参考以下代码：

'use strict'

let photo = document.getElementById('imgPhoto');
let file = document.getElementById('flImage');

photo.addEventListener('click', () => {
  file.click();
});

file.addEventListener('change', () => {  
  if (file.files.length <= 0) {
    return;
  }

  let reader = new FileReader();  
  reader.onload = () => {
    photo.src = reader.result;
  }

  reader.readAsDataURL(file.files[0]);
});

<div class="marg">
  <div class="maxSize">
    <div class="imageContainer">
      <img style="object-fit:cover;" src="{{ pessoa.imagem.url }}" alt="Imagem da Pessoa" id="imgPhoto">
    </div>
  </div>
  <input type="file" id="flImage" name="flImage" accept="image/*">
</div>

回答于 2025-04-14 由 Python大师

分享举报

如何在Django模板中显示图片？

2 个回答

在index.html文件中试试这个代码：

撰写回答