javascript - 带有 localStorage 的 jQuery 图片 uploader 。部分工作。默认图片不显示

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

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

我具备上传新图像/ Logo 和替换默认图像/ Logo 的基础知识。但是，我们在控制面板标题中预先植入了“开箱即用”的默认 Logo 。出于某种原因，默认 Logo 在首次加载页面时不显示。你目前得到一个破损的图像图标。上传新图片后，它会替换标题 Logo 并在管理小部件中保留当前选择。

如果您刷新页面，它会从工作正常的 localStorage 中调用它，但如果您重置，您会注意到预置 Logo 不会出现。

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