如何正确清空 NFT 铸造页中的已上传图片（而非删除 img 元素本身）

在 NFT 铸造页面中，点击“关闭”按钮时应仅清空图片预览（重置 src），而非移除 <img> 元素——否则将导致后续无法再次上传，本文提供简洁可靠的修复方案。

在 NFT 铸造页面中，点击“关闭”按钮时应仅清空图片预览（重置 `src`），而非移除 `

` 元素——否则将导致后续无法再次上传，本文提供简洁可靠的修复方案。

问题根源在于原始代码中使用了 nftImage.remove() —— 这会彻底从 DOM 中删除 <img> 标签，导致后续 #Nft-Image 元素不复存在，inputFile.onchange 事件中尝试赋值 nftImage.src = ... 时因 nftImage 为 null 而静默失败，用户便再也无法上传新图片。

✅ 正确做法是：保留 <img> 元素结构，仅清空其 src 属性，并可选地重置 alt 或添加占位提示，确保上传逻辑持续可用。

✅ 修复后的核心 JavaScript（推荐写法）

let closeButton = document.querySelector('.close');let nftImage = document.querySelector('#Nft-Image');let inputFile = document.querySelector('#input-file');// 图片上传处理：生成预览 URLinputFile.onchange = function () {if (inputFile.files && inputFile.files[0]) {nftImage.src = URL.createObjectURL(inputFile.files[0]);nftImage.alt = "Preview of uploaded NFT image";}};// 关闭按钮：仅清空 src，不删除元素closeButton.addEventListener('click', function () {nftImage.src = ""; // ✅ 关键修复：清空 src 即可nftImage.alt = "No image selected";});

? 补充说明与最佳实践

1. 不要用 remove()、removeChild() 或 innerHTML = ""：它们会破坏 DOM 结构，使后续 nftImage 引用失效；
2. 务必检查 inputFile.files[0] 是否存在：避免用户取消选择文件时触发 createObjectURL(null) 报错；
3. 可增强用户体验：例如点击关闭后自动触发 inputFile.value = ""，使文件输入框恢复初始状态（否则再次点击“Update File”可能不会触发 onchange）：

   closeButton.addEventListener('click', function () {nftImage.src = "";nftImage.alt = "No image selected";inputFile.value = ""; // 重置文件输入框，确保下次可重新触发 onchange});

4. CSS 小提示：当前 .NftUpload 的 object-fit: cover 在 src="" 时可能显示空白或浏览器默认占位图，如需更友好视觉反馈，可添加 CSS 规则：

   #Nft-Image[src=""] {background-color: #f9f9f9;border: 1px dashed #ccc;}

通过以上修改，关闭按钮将真正实现“撤销上传”的语义——图片预览消失，但上传区域保持功能完整，用户可随时重新选择文件，整个 minting 流程健壮且符合前端交互直觉。