37
Add low resolution base64 preview image in image object
Source: directus/directus#19443 · opened by @SvenBudak
Summary Hey Team :) I prefer, in each of my apps, to display a very low-resolution version of the image as a base64 background image on the <img> tag while an image is loading. This way, the user can immediately see a rough representation of the image and get an idea of which image is currently being loaded. However, it is necessary for this base64 preview image to be included as a string directly in the data object of the image. It would also be good if there could be a global setting for this, such as how small the image should be (I usually use 24x24px). In this video, you can see one of my old apps where I solved this manually. However, it would be nice to have this out of the box in the future. Basic Example Lets say we have this image object: then we can use image.preview like this in Angular for example: Motivation It is useful for all types of apps/websites. It's simply a part of good UX to show users things like spinners, skel…
No pledges yet. Be the first to back this.
Comments
Similar requests
Save selected preview resolution
2 votes · 0 comments
Live Preview option to automatically add a time-limited token to the query (incl. ENV vars)
18 votes · 0 comments
Improved preview options
24 votes · 0 comments
Postmessage based live-preview
20 votes · 0 comments
Websocket based live-preview
35 votes · 0 comments
No comments yet.