Image fields resolving as File

[flxsource]

A number of image fields in layouts are being displayed as plain File fields.

[toonvandenbos]

Hi @flxsource,

Could you give more details on the dependency versions you're using (Laravel, Nova, Flexible-Content, ...) ? Thanks.

[chosten]

I have the same problem using latest Nova, Laravel and flexible-content. The previewUrl of the image field is always null when used inside a flexible field because when the previewUrlCallback method is called $this->value is null.

I can fix it by changing the preview callback from this:

$field->preview(function () {
    return $this->value ? Storage::disk($this->getStorageDisk())->url($this->value) : null;
});

to this:

$field->preview(function ($value) {
    return $value ? Storage::disk($this->getStorageDisk())->url($value) : null;
});

I did not understand why this is happening but maybe this information will help fix this bug.

[gdespirito]

+1. This is happening to me too.

Using: Nova v3.7.0 Flexible content: v0.2.5 Laravel: 7.17.2

[temp1029]

Was seeing this issue as well and @SquareBeard's solution fixed it but with two modifications:

1. Needed to include Laravel's 'Storage' facade (Illuminate\Support\Facades\Storage)
2. Had to explicitly define the disk versus using '$this->getStorageDisk()'

[temp1029]

Update on my comment above. If I use the nova 'thumbnail' function instead of 'preview' I get the second parameter '$disk', which can be used to make the call dynamic again.

[progcode]

I have same issue, but solved with this:

            Flexible::make('Galéria kép', 'gallery_images')
                ->addLayout('Kép tulajdonságai', 'image', [
                    Image::make('Kép', 'thumbnail')->thumbnail(function ($value) {
                        return Storage::disk($this->disk)->url($value);
                    }),

[matthewjumpsoffbuildings]

https://github.com/whitecube/nova-flexible-content/issues/205#issuecomment-740096784 This isn't working any more for me in Laravel 9

[jaap]

I eventually resolved this by extending the Laravel\Nova\Fields\Image::class and adding a method to apply the resolving for the preview and thumbnail image within flexible_content.

Extended class could be something like;

<?php

namespace App\Nova\Fields;

use Laravel\Nova\Fields\Image;

class FlexibleImage extends Image
{
    public function __construct($name, $attribute = null, $disk = null, $storageCallback = null)
    {
        parent::__construct($name, $attribute, $disk, $storageCallback);
        $this->setFlexibleThumbnails();
    }

    public function setFlexibleThumbnails()
    {
        $this->thumbnail(function ($value) {
            return $value ? Storage::disk($this->getStorageDisk())->url($value) : null;
        })->preview(function ($value) {
            return $value ? Storage::disk($this->getStorageDisk())->url($value) : null;
        });
        return $this;
    }
}

Implementation on your layout would be something like;

public function fields(Request $request)
{
    return [
        // ...

        Flexible::make('Content')
            ->addLayout('Image and title', 'image_title', [
                Text::make('Title'),
                FlexibleImage::make('image')
            ])
    ];
}