Some SVG files are not showing on Index page

[armando-moreira]

• Laravel Version: 9.52.12
• Nova Version: 4.26.4
• PHP Version: 8.0.2
• Database Driver & Version:
• Operating System and Version: MacOS.14
• Browser type and version: Chrome 117.0.5938.149

Description:

The File field is not displaying some SVG images on resource index page. It shows perfectly fine on Detail/Create/Edit screens.

Detailed steps to reproduce the issue on a fresh Nova installation:

• Just create File field on the Nova resource
• Upload an svg image
• Check the index page

File examples:
The first one works perfectly but the 2nd image does not display on index.

[crynobone]

One SVG has a fixed width and height and another one scale to view. Have you configured the field using https://nova.laravel.com/docs/resources/file-fields.html#images

[armando-moreira]

Yes I am using the Image field.

Image::make(__('File'), 'filename', config('nova.storage_disk'))->indexWidth(60)->detailWidth(100)

The weird thing is that it shows perfectly on the Detail and Edit pages.

[philipbaginski]

The same issue.

[StyxOfDynamite]

FWIW, specifying ->indexWidth(50) sets the max-width attribute in css, if i amend the css to min-width or width then my SVG shows up, but by default its rendered as 0px width.

[StyxOfDynamite]

I found a solution for my use case.

// will render
Text::make('favicon', function () {
                return sprintf(
                    '<img style="%s" src="%s">',
                    'max-width:50px;',
                    $this->faviconUrl
                );
                })->asHtml()->onlyOnIndex(),

// will not render
Image::make('favicon')->disk(config('filesystems.default')),

Only think of note is that favicon, returns the path and the faviconUrl uses an attribute accessor to return the computed url.

The resulting HTML from my approach renders, a containing <div>,with a height but the out of the box markup uses a <span> which has 0 height and then sets the image to be height:auto within this 0 height span.

[armando-moreira]

This works for me. Thank you @StyxOfDynamite