向TUI image editor传入预览图时appendChild为null报错如何解决

首先修正代码中的两处语法错误 #

你的报错直接由这两个语法问题导致：

• document.getElementById('#tui-image-editor') 参数错误：getElementById 方法仅需传入纯ID字符串，不需要加#前缀，加前缀会导致匹配不到对应节点返回null，调用appendChild自然抛出空引用错误
• appendChild('canvas') 参数错误：你需要传入之前创建的canvas元素对象canvas，而非字符串'canvas'，否则会抛出参数类型不匹配错误

更推荐的TUI Image Editor标准实现方案 #

你不需要手动创建canvas插入容器，TUI Image Editor初始化时会自动生成内部所需的canvas层级，手动插入外部canvas反而会破坏库的DOM结构导致运行异常，直接调用官方提供的加载图片API即可：

// 第一步先按官方要求初始化TUI Image Editor实例，替换为你的实际容器ID
const imageEditor = new tui.ImageEditor('#你的TUI容器ID', {
    includeUI: {
        locale: locale_zh, // 按需添加中文配置，无需求可删除
        initMenu: 'crop',
        menuBarPosition: 'bottom'
    },
    cssMaxWidth: 1224,
    cssMaxHeight: 768
});

// 初始化完成后加载预览图
$(document).ready(function() {
    const previewImgSrc = $("#image_upload_preview_profile").attr("src");
    // 调用官方API加载图片，第二个参数为自定义图片名称
    imageEditor.loadImageFromURL(previewImgSrc, 'user_upload_img').then(() => {
        // 加载完成后可调用方法适配画布尺寸
        imageEditor.ui.resizeEditor();
    }).catch(err => {
        console.error("图片加载失败：", err);
    });
});

注意：上述初始化配置项可根据你的业务需求灵活调整，只要保留官方要求的基础容器节点即可，不需要额外手动插入DOM元素。

内容的提问来源于stack exchange，提问作者Shubham Gupta