image editor returns black screen

[joukhar]

in config

    'default' => [
            'basic_blocks' => true,
            'bootstrap4_blocks' => false,
            'code_editor' => true,
            'image_editor' => true,
            'custom_fonts' => [],
            'templates' => true
        ],

screenshot : https://prnt.sc/WggH-yulJCBa

[ghost]

Hello there, Have you removed the image editor from the custom plugins in the config? If so, please try a hard refresh or incognito window

[joukhar]

ok i will try.

[joukhar]

it doesn't work

in the console :

Failed to load resource: the server responded with a status of 500 (Internal Server Error)

Error loading http://127.0.0.1:8000/laravel-grapesjs/asset/proxy?file=http://127.0.0.1:8000/storage/editor/media/Screenshot%202022-09-05%20235720.png

Uncaught TypeError: Cannot read properties of null (reading 'getElement')
    at tui-image-editor.js:15341:33
    at klass.<anonymous> (fabric.js:6411:23)
    at img.onerror (fabric.js:642:30)

[ghost]

Can you please open this link http://127.0.0.1:8000/storage/editor/media/Screenshot%202022-09-05%20235720.png in your browser and let me know if it returning the image or not?

If it shows an error page instead of an image, you might be not created the storage link.

[joukhar]

it returns image.

[ghost]

Have you tried with a different image?

[joukhar]

yes

[joukhar]

hi sir , if u don't have free time just leave it , until you have some of it , and thanks for ur efforts 💙

[OmarAlwabsi]

Hi I think the problem is caused by using a Fake domain for example: http://laravel-grapesjs.test

The problem is in: Dotlogics\Grapesjs\App\Http\Controllers\AssetController

private function replaceLocalUrlToFilePath($url)
{
    $urlParts = parse_url($url);
    if ($urlParts['host'] == 'localhost') {
        return [public_path($urlParts['path']), true];
    }

    return [$url, false];
}

the solution :

private function replaceLocalUrlToFilePath($url)
{
    $urlParts = parse_url($url);
    // if ($urlParts['host'] == 'localhost') {
    //     return [public_path($urlParts['path']), true];
    // }

    if ($urlParts['host'] == request()->getHttpHost()) {
        return [public_path($urlParts['path']), true];
    }

    return [$url, false];
}

[joukhar]

thanks , finally it works