Conversation
|
|
||
| let { src, onStart, onLoad, onError, ref = $bindable(), ...rest }: Props = $props(); | ||
|
|
||
| let capturedSource: string | undefined = $state(); |
There was a problem hiding this comment.
@michelheusschen Hopefully the variable naming now makes it more clear that we only intend to operate on a single non-undefined src value. If you want this to call listeners and update multiple times based on updates to the src prop - surround this with a {#key} - or just use native <img>
| src={url} | ||
| onLoad={setLoaded} | ||
| onError={setErrored} | ||
| class={['object-cover bg-gray-300 dark:bg-gray-700', optionalClasses, imageClass]} |
There was a problem hiding this comment.
This bg-gray-300 dark:bg-gray-700 only shows up when the image itself has a transparent background.
midzelis
force-pushed
the
push-zxvnukqrtruv
branch
2 times, most recently
from
46f88ba to
5578718
Compare
midzelis
force-pushed
the
push-zxvnukqrtruv
branch
from
5578718 to
201f1ff
Compare
midzelis
force-pushed
the
push-zxvnukqrtruv
branch
5 times, most recently
from
80d88a5 to
4bdd917
Compare
midzelis
force-pushed
the
push-zxvnukqrtruv
branch
3 times, most recently
from
c039995 to
e458154
Compare
|
Preview environment has been removed. |
danieldietzler
left a comment
danieldietzler
left a comment
There was a problem hiding this comment.
I need to go through the class changes again and also actually test it. This PR seems well-contained though
midzelis
force-pushed
the
push-zxvnukqrtruv
branch
from
e458154 to
62682d1
Compare
| </script> | ||
|
|
||
| {#if capturedSource} | ||
| {#key capturedSource} |
There was a problem hiding this comment.
You don't need the #key here, do you? It'll only re-render the img which will update/re-render anyways
3 participants
Split thumbnail specific portion from #26305 26305
Before: (Showing broken images)
After: (Broken images)
Here is it with unbroken images
Key things to notice: