带有localStorage的jQuery图像上传器.部分工作.默认图像未显示

Question

我正在为公司控制面板开发管理功能。我试图创建的小部件是管理员用自己的公司徽标替换控制面板上的默认徽标。

我使用localStorage来验证概念，但它将在生产时保存到数据库和CMS中。

我有上传新图像/徽标和替换默认图像/徽标的基础知识。然而，我们正在用"开箱即用"的默认徽标对控制面板标题进行预播种。由于某些原因，第一次加载页面时，默认徽标不会显示。您当前得到一个损坏的图像图标。一旦你上传了一个新的图像，它就会替换标题标志，并将当前选择保留在管理小部件中。

如果您刷新页面，它会从本地存储中调用此信息，本地存储运行良好，但如果您重置，您会注意到预播种的徽标不会出现。

var img = new Image();
img.src = localStorage.theImage;
$('.logoArea').html(img);
$("body").on("change", ".uploadLogo", function() {
var fileInput = $(this)[0];
var file = fileInput.files[0];
var reader = new FileReader();
reader.onload = function(e) {
// CREATE A NEW IMAGE
var img = new Image();
img.src = reader.result;
localStorage.theImage = reader.result; // STORE IMAGE IN LOCAL STORAGE
$(".logoArea").html(img);
}
reader.readAsDataURL(file);
});

不确定我哪里错了。请参阅小提琴的工作模型

更新：这个问题已经解决，我将下面的fiddle更新为工作版本，以防它帮助其他人。

https://jsfiddle.net/evmcatj1/7/

Answer 1

在第一次加载时，localStorage.theImage;是undefined，您应该使用默认图像，以防用户第一次打开页面