Image thumbnails are not displayed in table view

[christianrr]

Preflight Checklist

• I have completed all Troubleshooting Steps.
• I'm on the latest version of Directus.
• There's no other issue that already describes my problem.

Describe the Bug

When using an image field, thumbnails are no longer visible in the table view (this was working in RC releases).

When a thumbnail is specified for the display of the image field, the table view renders "--". If no display template is specified, the UUID is rendered.

Similar to #10105.

To Reproduce

• Create table "test"
• Create image field "image"
• Create entry in "test" and upload image
• Display table view of "test"
• No thumbnail is visible, neither with thumbnail display nor raw display

Errors Shown

No response

What version of Directus are you using?

9.1.2

What version of Node.js are you using?

12.2

What database are you using?

MySQL 5.7

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying Directus?

locally

[rijkvanzanten]

Seems like things are working as expected on my end 🤔

CleanShot.2021-12-02.at.18.05.38.mp4

(feat. my 🐈‍⬛)

You mentioned you were using the "Thumbnail" display. Did you mean the Image display like I did in my screencast?

[christianrr]

Hmm, version 9.1.2 -> no "Image" display available (see below). Same on updated 9.2.0. Any Ideas?

What I originally meant was that I've created a "Related Values" display with thumbnail option.

[christianrr]

Just tried your workflow with a clean 9.2.0 setup:

"Image" and "File" displays only appear in "Continue Advanced Field Creation Mode". If you "Save" the field first and then call the field's display options by clicking it in fields list, "Image" and "File" options are gone.

Using a "Related values" display instead with picking "Thumbnail" from dropdown works neither.

[christianrr]

My current workaround: Updating the display option for all image fields manually in the DB:
UPDATE directus_fields SET display = 'image' where interface = 'file-image'

[rijkvanzanten]

@christianrr I'm not seeing that particular issue under 9.2.1 on my end 🤔 Could you try it in 9.2.1 and let me know if the problem persists?

[christianrr]

@rijkvanzanten Nope, still the same... Video is from a clean install with 9.2.1 and SQLite, however the same issue appears on an updated instance with MySQL.

directus.mov

[rijkvanzanten]

@christianrr so weird! @azrikahar Would you be able to take a look?

[azrikahar]

Can confirm this still happens on v9.3.0 for SQLite and MySQL, but not PostgreSQL. Seems like the issue is when the file-image interface is added to the two databases, the field type ended up being String (not sure was this ever not String in the past for them) whereas it's UUID in PostgreSQL.

We can also confirm this in @christianrr latest video, at the 0:32 mark where it showed the image field is of type String. Since interfaces like file-image are only shown for type UUID, it will not be shown for SQLite or MySQL:

directus/app/src/interfaces/file-image/index.ts

Line 10 in 530db94

types: ['uuid'],

@christianrr has this worked before, perhaps in RC releases as you mentioned? If it ever did, there may be some regressions happening here since file-image has been limited to type uuid one year ago 🤔

[christianrr]

Can confirm that the image thumbnail worked in RC releases, for instance in rc.94.

Maybe the issue was introduced with the new "quick field" and "create in advanced mode" feature, because beforehand you were explicitly choosing the option "Single file" from "Create field" options and there UUID was set as field type (see pictures).

[robertosanval]

Same problem here on 9.3.0, I've solved it temporarily with the SQL query mentioned by @christianrr