smart not working in Laravel 10

[metaversedataman]

I tested this package with Laravel 10, the image is displayed but with none of the configuration applied such as: resize, rotate, colorize.
I like to know what could be wrong on my end. Also, the rendered image path follows data-src instead of src attribute, which doesn't make sense to me. Path must be set to the actual path defined in the disk. Why the use of disk then?

Example:

Blade view

<x-smart-image src="6Tq99mBdQZTiLGy1udDpxkfgSWB8XjTrNJLRYLZv.jpg" data-template="rotated" data-disk="photo" data-src="6Tq99mBdQZTiLGy1udDpxkfgSWB8XjTrNJLRYLZv.jpg"/>

This above image is displayed in its full size

Blade view (not working)

<x-smart-image src="6Tq99mBdQZTiLGy1udDpxkfgSWB8XjTrNJLRYLZv.jpg" data-template="rotated" data-disk="photo" data-src="sample image.jpg"/>

The above image is not displayed

As you can see in the config below, I have to set the path to the actual directory folder as defined in the disk as well for the image to be displayed (as indicated in the first view above), although without being resized and none of the other settings applied. I thought the data-disk attribute resolves the base path for the image.

Config Setup

$rectangle = [
    'background' => ['rgba(255, 255, 255, 0.5)'],
    'border'     => [10, '#CCC']
];

return [
    'image'    => [
        'path'      => 'public/storage/photo',
        'templates' => [
            'small' => [
                'resize' => [200, null, ['aspectRatio']],
            ],
            'rotated' => [
                'resize' => [100, null, ['aspectRatio']],
                'rotate' => [-45],
                'colorize' => [-100, 0, 100],
                'rectangle' => [5, 5, 195, 195, $rectangle],
            ],
            'big'   => [
                'resize' => [500, null, ['aspectRatio']],
            ]
        ],
        'file-not-found' => 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAA1JREFUGFdj+P///38ACfsD/QVDRcoAAAAASUVORK5CYII='
    ],
    'download' => [
        'path'         => 'public/downloads',
        'default-text' => 'download this file'
    ]
];

Any help will be much appreciated. Thank you.

[dietercoopman]

Hi, I've tested your setup and there is an issue with the filename I guess, can you remove the space please. I also use the real storage path of my application and not a subfolder of the public path ... Is it meant to be the public path ?

<x-smart-image src="{{ storage_path('smart.png') }}" data-template="rotated" data-disk="photo" data-src="sample_image.jpg"/>

This results in this image

Does this solve your problem ? Have an nice day !

[metaversedataman]

Assessing the image isn't the problem. I tried again, and the image only got displayed when I use the real image name in data-src rather than src attribute. I found out that the image root is controlled by the path in the config, whereas the src attribute on the x-smart-image element is useless in my setup.

I think the installation isn't working as expected. I suspect ffmpeg dependency as the culprit here. I was using a package with Intervention dependency. Resizing works only on my localhost because I had ffmpeg setup. When I deployed on linux server where I had no ffmpeg setup, resizing stopped working.

Please, I still need help to resolve this.