Does not render the image randomly

[julianphp]

Hi, I don't know what problem I have, but I load the library from a js iframe, and after I finish using it I delete the iframe completely, randomly, the image does not load and remains blank. The url of the image is correct, it is the same server. Sometimes when moving between the tabs next to it, the image appears as if it were a preview. If I leave the original image button pressed, it shows the image. The only thing I see different is that in the canvas part it only creates one and when it creates it well there are two.

This is the code for the library cdn js. I use Firefox, chrome and edge.

document.addEventListener("DOMContentLoaded", function(event) {
  let dataFromDocument = location.hash.replace(/#/, "").split('&&idSerie');

    const { TABS, TOOLS } = window.FilerobotImageEditor;
    const config = {
        source: dataFromDocument[0],
        showBackButton: false,
        defaultSavedImageQuality: 100,
        onBeforeSave:() => false,
        onSave: (editedImageObject, designState) => {
            const arr = {
                'image': editedImageObject.imageBase64,
                'path': dataFromDocument[0],
                'idSerieOrtodoncia': dataFromDocument[1],
            }
            window.parent.postMessage(arr, "*");
        },
        closeAfterSave: false,
        annotationsCommon: {
            fill: '#ff0000',
        },
        Text: { text: 'Texto...' },
        Rotate: { angle: 90, componentType: 'slider' },
        language: 'es',
        translations: {
            flipX: 'Efecto Espejo',
            unFlipX: 'Efecto Espejo',
            profile: 'Perfil',
            coverPhoto: 'Cover photo',
            facebook: 'Facebook',
            socialMedia: 'Social Media',
            fbProfileSize: '180x180px',
            fbCoverPhotoSize: '820x312px',
            rectangleTool: 'Rectángulo',
            textTool: 'Texto',
            imageTool: 'Imagen',
            lineTool: 'Linea',
            penTool: 'Pluma',
            polygonTool: 'Polígono',
            ellipseTool: 'Elipse',
            arrowTool: 'Flecha',
            adjustTab: 'Ajustar / Cambiar Tamaño',
            rotateTool: 'Rotar',
        },
        Crop: {
            presetsItems: [
                {
                    titleKey: 'classicTv',
                    descriptionKey: '4:3',
                    ratio: 4 / 3,
                    // icon: CropClassicTv, // optional, CropClassicTv is a React Function component. Possible (React Function component, string or HTML Element)
                },
                {
                    titleKey: 'cinemascope',
                    descriptionKey: '21:9',
                    ratio: 21 / 9,
                    // icon: CropCinemaScope, // optional, CropCinemaScope is a React Function component.  Possible (React Function component, string or HTML Element)
                },
            ],
        },
        tabsIds: [TABS.ADJUST, TABS.ANNOTATE, TABS.FINETUNE], // or ['Adjust', 'Annotate', 'Watermark']
        defaultTabId: TABS.ADJUST, // or 'Annotate'
        defaultToolId: TOOLS.TEXT, // or 'Text'
    };

// Assuming we have a div with id="editor_container"
    const filerobotImageEditor = new FilerobotImageEditor(
        document.querySelector('#editor-imagenes-container'),
        config,
    );

    filerobotImageEditor.render({
        onClose: (closingReason) => {
            filerobotImageEditor.terminate();
            window.parent.postMessage({closeModal: true}, "*");
        },
    });
});

This is when is work ok. Imgur

when not displaying the image when opening Imgur when I press and hold the button to show the original picture Imgur

[fones]

@julianphp did you find the cause of a problem?

I see similar problem in my case, when I open editor inside iframe. It not loads image at first time, but when i reload the iframe (not whole site - just iframe) it starts to work.

I happening all the time. When I refresh parent window, first load of iframe cause not showing the image.

[alexey-yanchenko]

The same problem. This happens due to iframe hidden when app initialize. In my case by display: none, i replace it by visibility: hidden and problem gone

[fones]

@alexey-yanchenko confirm, I found out, that when I load this plugin inside iframe which is display:noneat the first place - it not work. But when I refresh this iframe it works:

1. iframe display: none - loading plugin
2. iframe display != none - plugin is not showing photo
3. refreshing from inside the iframe
4. loading plugin and now photo is visible