Error `Uncaught TypeError: t.addEventListener is not a function` integrating PhotoEditorSDK inside react-dom.js

Question

第一次尝试将 PhotoEditorSDK 集成到 angular 应用程序时，我在控制台中看到此错误。

我的配置是：

const container = document.getElementById('editor');
const editor = new $window.PhotoEditorSDK.UI.DesktopUI({
    container: container,
    license: '{ .. }',
    assets: {
        baseUrl: '/js/pesdk/assets' // <-- This should be the absolute path to your `assets` directory
    },
    editor: {
        image: 'https://www.photoeditorsdk.com/assets/images/new/landingpage/platform_html5-4c8765e5.png',
    },
    style: {
        width: 500,
        height: 500,
    },
});

编辑器开始加载，许可证调用成功完成，然后我看到：

react-dom.production.min.js:162 TypeError: t.addEventListener is not a function
    at e._loadSource (PhotoEditorSDK.js:6)
    at new e (PhotoEditorSDK.js:6)
    at e.setImage (PhotoEditorSDK.js:73)
    at e._setImage (PhotoEditorSDK.UI.DesktopUI.js:14)
    at c (PhotoEditorSDK.UI.DesktopUI.js:14)
    at e.setImage (PhotoEditorSDK.UI.DesktopUI.js:14)
    at e.componentDidMount (PhotoEditorSDK.UI.DesktopUI.js:27)
    at commitLifeCycles (react-dom.production.min.js:148)
    at b (react-dom.production.min.js:156)
    at t (react-dom.production.min.js:167)

未缩小的 "development" react-dom 文件看起来也缩小了，因此很难调试。

Answer 1

现在 image 选项必须是实际的图像对象，而不是字符串 URL，这就是错误的来源。所以你需要先加载图像，将它作为选项传递并加载编辑器。

这里有一个 angular 演示项目，如果您想查看：

https://github.com/imgly/pesdk-angular-demo