在 NFT 铸造页面里，点击“关闭”按钮时，正确的处理方式应该是只清空图片预览，也就是重置 `src`，而不是直接删除 元素本身。否则会导致用户后续无法再次上传图片。本文将给出一个简单、稳定且适合实际项目的修复方案。

在 NFT 铸造页面中，用户点击“关闭”按钮时，应该仅清空已上传图片的预览内容，也就是重置 `` 的 `src`，而不是把 `` 标签从页面中移除。否则，NFT 上传组件会失去后续预览能力，用户将无法再次上传图片。本文提供一种简洁、可靠且便于维护的前端修复方法。

问题的根源就在原始代码中的 nftImage.remove()。这一步并不是“清空图片”，而是直接将 DOM 中的 元素彻底删除。结果也很明显：页面里的 #Nft-Image 节点不再存在。这样一来，当后续在 inputFile.onchange 事件中再次执行 nftImage.src = ... 时，由于此时的 nftImage 很可能已经变成 null，赋值操作自然无法正常生效，最终就会出现 NFT 铸造页无法重新上传图片的问题。

✅ 正确的修复思路是：保留 元素结构不变，只清空其 src 属性，并根据需要重置 alt 文本或添加占位提示。这样既能清除当前图片预览，又能保证上传逻辑持续可用，避免影响后续的图片选择与展示。

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

let closeButton = document.querySelector('.close');
let nftImage = document.querySelector('#Nft-Image');
let inputFile = document.querySelector('#input-file');

// 图片上传处理：生成预览 URL
inputFile.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";
});

? 补充说明与最佳实践

• 不要使用 remove()、removeChild() 或 innerHTML = ""：这些写法会直接破坏 DOM 结构，导致后续的 nftImage 引用失效，进而影响图片上传与预览功能；
• 务必先检查 inputFile.files[0] 是否存在：这样可以避免用户取消选择文件时执行 createObjectURL(null) 而报错，提升代码健壮性；
• 可以进一步优化用户体验：例如在点击关闭后同步执行 inputFile.value = ""，让文件输入框恢复初始状态。否则，用户再次点击“Update File”时，可能因为文件未变化而无法触发 onchange 事件：

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

• CSS 细节提示：当前 .NftUpload 使用了 object-fit: cover，在 src="" 的情况下，可能会显示为空白区域或浏览器默认占位图。若想让 NFT 上传区域的视觉反馈更友好，可增加如下 CSS 规则：

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

通过以上优化，关闭按钮就能真正实现“清空已上传图片预览”或“撤销上传”的效果：预览图片消失，但上传区域和 `` 结构依然完整保留，用户可以随时重新选择文件继续上传。这样不仅能修复 NFT 铸造页面无法重复上传图片的问题，也能让整个 minting 流程更加稳定、自然，并符合常见的前端交互设计习惯。