When a Livewire component changes only the tiny placeholder if the image is shown.

[stefro]

Hi,
I'm a huge fan of the responsive images feature of media-library, especially the tiny placeholder is really great.

When I use an image inside of a Livewire component, the image is shown perfectly as expected when the component is initially loaded. But as soon as an element in the component changes the image will be replaced by the tiny placeholder (the blurry svg). For some reason this keeps happening. The only thing I can do is set use_tiny_placeholders => false in the media-library config file.

Is there anyone who has experienced the same and came up with a solution?

Thank you in advance!

Laravel 8.27.0
Medialibrary 9.4.2
Livewire 2.3.17

[jayenne]

I have just hit this too. I think it maybe that the isn't being triggered by images that are served by the browser's cache (although haven't proven this).

Is there a way that either livewire can trigger an onload event for all images withing it's payload? or can medialibrary do something here?

and can anyone confirm/refute my hypothesis?

[jayenne]

My workaround hack for now is to add a javascript to listen for livewire to dispatch the 'message.processed' event that in turn triggers a refresh event.

(Please impove or better it as it's super-mega-fugly)

To be included on any page it's required ... app.blade is a good place for site wide inclusion.

<script>
document.addEventListener("livewire:load", function(event) {
    window.livewire.hook('message.processed', (component) => {
        refreshImages();
    })
});
function refreshImages(){
    var images = document.querySelectorAll('img[srcset*="responsive-images"]');
    window.requestAnimationFrame( function(){
        for(i = 0 ; i < images.length; i++){
            var size = images[i].getBoundingClientRect().width;
            var sizes = Math.ceil(size/window.innerWidth*100)+'vw';
            images[i].sizes=sizes;
        }
    });
}
</script>

Hope it helps someone ...and hope it gets a better solution too.

[stefro]

Thanks @jayenne! This works great!

[landg16]

I have found another, and I think better solution for this.

First of all you have to publish media library resources:
php artisan vendor:publish --provider="Spatie\MediaLibrary\MediaLibraryServiceProvider" --tag="views"

After you publish resources, open: resources/views/vendor/media-library/responsiveImageWithPlaceholder.blade.php
You will see, that when onload function is called, it's getting null as soon as this function is getting called. all you have to do, is to remove onload=null; from onload function, and your file will look like this:

<img{!! $attributeString !!} @if($loadingAttributeValue) loading="{{ $loadingAttributeValue }}"@endif srcset="{{ $media->getSrcset($conversion) }}" onload="window.requestAnimationFrame(function(){if(!(size=getBoundingClientRect().width))return;sizes=Math.ceil(size/window.innerWidth*100)+'vw';});" sizes="1px" src="{{ $media->getUrl($conversion) }}" width="{{ $width }}" height="{{ $height }}">

I do not know why they made onload function null after loading it, but this seems like to work better than everything I tried.

[dnnp2011]

I'm also having this problem. The solution suggested by @landg16 does work, however, in my case it leads to an infinite loop.

[landg16]

@dnnp2011

Yes, one day this solution was workong but another it didn't, so I ended up using this function on every action. For example, if i have component that has display: none and transforms to display: block after click, I have to call it to inform browser which size image it has to load.

function imageLoader() {
    const images = document.getElementsByTagName('img');
    for (let i = 0; i < images.length; i++) {
        if (images[i].srcset.length <= 0) continue;
        let size = images[i].getBoundingClientRect().width
        if (!size) continue;
        images[i].sizes = Math.ceil(size / window.innerWidth * 100) + 'vw';
    }
}

Real problem here is that when u have display: none, images have 0 width and heigth, so you have to inform browser that image size has changed after action to load correct image src. Hope this helps.