How to display images in templates using Django?

题意：怎样在 Django 的模板中显示图片？


问题配景：

Using Django. In a template i want an image that if the user wants to change the photo, he just needs to click in the image already presented and then the file explorer is opened so that a new image can be chosen. Then the new image must be preview in the template in place of the old one temporarily.
在使用 Django 的模板时，我希望实现如许的功能：用户想更换照片时，只需点击已经展示的图片，文件资源管理器就会打开，用户可以选择一张新的图片。然后，新图片应在模板中临时替换旧图片进行预览。

the program is opening the file explorer, i choose the new image but the old image isn't change and the new image isn't displayed in any place of the html too my code:
程序打开了文件资源管理器，我选择了新图片，但旧图片没有改变，新图片也没有显示在 HTML 的任何地方。以下是我的代码：

1. <script>
3. // Quando a imagem da pessoa for clicada
4. document.getElementById("imagem-pessoa").addEventListener('click', function() {
5. // Abrir o explorador de arquivos ao clicar no campo de arquivo oculto
6. document.getElementById("input-imagem").click();
7. });
9. // Quando uma nova imagem for selecionada
10. document.getElementById("input-imagem").addEventListener('change', function(event) {
11. // Capturar a nova imagem selecionada
12. const novaImagem = event.target.files[0];
13. // Atualizar temporariamente a imagem no HTML
14. const urlNovaImagem = URL.createObjectURL(novaImagem);
15. document.getElementById("imagem-pessoa").src = urlNovaImagem;
16. });
17. </script>

复制代码

and the html

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

复制代码

it aren't working        没有正常运行
what i expected is: "a person registration page is loaded, receiving a number that searches the database and returns a person from the database. It then fills in some elements on the screen with the data found in the database table about that person. Among the people model objects there is a model.ImageField that stores a photo of each person." What I need is: I want the image found referring to the person that was searched for (in the people table) to be presented in the html, but at the same time I want it so that if the user wants to change the photo, he just needs to click on it of the image already presented and then the file explorer is opened so that a new image can be chosen. Once the new image has been chosen, the new image must be displayed in the html in place of the old one temporarily, but the replacement of the photo in the database must only be carried out after a submit button is clicked
我盼望的功能是：加载一个人员注册页面，接收一个编号，通过该编号查询数据库，并返回一个数据库中的人员信息。然后，页面会用数据库表中关于此人的数据添补一些元素。在人员模型对象中，有一个 `model.ImageField` 字段，用于存储每个人的照片。
我必要的是：在 HTML 中展示从人员表中查询到的与该人相关联的图片。同时，如果用户想更换照片，只需点击已显示的图片，文件资源管理器就会打开，用户可以选择一张新图片。一旦选择了新图片，该新图片应临时替换旧图片在 HTML 中显示，但只有在用户点击提交按钮后，照片的替换才会真正更新到数据库中。

问题办理：

I've solved this problem.        已经办理了问题
To make this functionality work in a template HTML in Django, see this code:
要在 Django 的模板 HTML 中实现此功能，请参考以下代码：

1. 'use strict'
3. let photo = document.getElementById('imgPhoto');
4. let file = document.getElementById('flImage');
6. photo.addEventListener('click', () => {
7.   file.click();
8. });
10. file.addEventListener('change', () => {  
11.   if (file.files.length <= 0) {
12.     return;
13.   }
15.   let reader = new FileReader();  
16.   reader.onload = () => {
17.     photo.src = reader.result;
18.   }
20.   reader.readAsDataURL(file.files[0]);
21. });

复制代码

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

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。