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.

[faxunil]

php artisan vendor:publish --provider="Spatie\MediaLibrary\MediaLibraryServiceProvider" --tag="views"

I have the same issue....
I'm very disappointed how Spatie is handling issues, they are not answering any questing, also. I see this isssue is more ore less one year old problem.
And I paid for this pack ..... And they are also promoting Livewire version. ....

@landg16 Thanks for Your help. I will check it.

[faxunil]

@landg16 Thanks It helped me to solve the issue.

[landg16]

I think this is not the best solution, because as @dnnp2011 mentioned, it leads to infinite loop (on some browsers), because onload function is called infinitely and it needs to get null at some point. The reason this is happening, is that you have already loaded the image and because it was displayed as 0x0 size, it won't load correct sizeof image and will load inline blurry svg. As I've thought, there is no way to write universal script for it, so here is the suggestion to do:

To fix this, I suggest you to find action after your images are displayed as blurry and assign below function (imageLoader()) to it.

For example, if you're using bootstrap and you want images to be displayed after tab change, you can do following, select all tab button, detect shown function (to be sure that images are loaded) and reload image sizes to load correct srcset image:

const tabButtons = document.querySelectorAll('[data-bs-toggle="tab"]');

tabButtons.forEach((button) => {
    button.addEventListener("shown.bs.tab", function () {
        imageLoader();
    });
});

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';
    }
}

P.S.: I love Spatie, they have provided so much Laravel plugins for free, it's outrageous. Sometimes we have to find way ourselves, it's okay.

[faxunil]

Yes really there a lot of good thinks from Spatie, but I think If You contact them with an issue via Git via E-mail etc. somebody should answer that sorry we can't / wan't to solve it.... even If you are a client and not only using the free library. :( But it it my opignion.

[Saifallak]

if anyone using owl.carousel
this worked with me

<script>
    jQuery(document).ready(function() {
        imageLoader();
    });

    $('.owl_testimonials').on('resized.owl.carousel', function() {
        imageLoader();
    })

    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';
        }
    }
</script>

[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.

[zkang93]

Generate UUID and set is as id of the img tag seems to solve the problem.

$image->img()->attributes(['id' => UUID::generate(), 'class' => ' $classes'])

[madurapa]

This solution works for me

Laravel 9 and 10

$image->img()->attributes(['id' => \Illuminate\Support\Str::uuid()])

[johnpuddephatt]

I was having this issue not just with Livewire but also in other situations where the image was initially not visible (e.g. in an accordion, carousel or tab). It was intermittent... sometimes images would get the correct size, other times they wouldn't. This seemed to relate to browser caching but I couldn't get to bottom of it

The simple solution in my case was to provide a way for me to manually set an image's width for situations where the automatic width measurement wasn't working.

To do this, I published the views [as mentioned in the documentation](php artisan vendor:publish --provider="Spatie\MediaLibrary\MediaLibraryServiceProvider" --tag="views"
), and changed responsiveImageWithPlaceholder.blade.php to:

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

The if(dataset.width) { onload = null; sizes = dataset.width } bit means that if add data-width="30vw" to an image it will be given the width 30vw. The data-width attribute can be added using the attributes method:

{!! $image->img('square')->attributes([
    'data-width' => '30vw',
    'class' => 'block rounded'
]) !!}}

[tacocode-dev]

I have a paginator connected to a grid with images. Setting the wire:key on each looping item solves the issue for me as well. No more blurred images when paginating.

@foreach($this->items as $item)
<div wire:key="showcase-{{ $item->id }}" class="group relative flex flex-col overflow-hidden rounded-lg border border-gray-200 bg-white p-1">
    <div class="aspect-w-1 aspect-h-1 overflow-hidden rounded-lg bg-gray-200 group-hover:opacity-75">
        {{ $item->getFirstMedia('showcases')->img('high', ['loading' => 'lazy', 'class' => 'h-full w-full object-cover object-center sm:h-full sm:w-full', 'alt' => $item->name]) }}
    </div>
</div>
@endforeach

[RhysLees]

This solution also worked for me

[michaelhue]

I've been experiencing this issue as well and just wanted to add my own solution, in case someone finds it useful.

I created a dedicated Alpine.data() component that uses the ResizeObserver API to calculate the sizes value. It works when the image element is not visible on page load and it will also update the value when the image's size changes, basically covering all situations where you might not get the correct image size.

Alpine component

Here is the code for the component:

/**
 * @param {HTMLElement} element
 * @param {DOMRectReadOnly} rect
 * @param {ResizeObserver} observer
 */
const updateSize = (element, { width, height }) => {
  const size = Math.ceil((width / window.innerWidth) * 100);
  element.setAttribute("sizes", `${size}vw`);
};

const resizeObserver = new ResizeObserver((entries, observer) =>
  entries.forEach((entry) =>
    updateSize(entry.target, entry.contentRect, observer)
  )
);

Alpine.data("responsiveImage", () => ({
  init() {
    resizeObserver.observe(this.$el);
  },

  destroy() {
    resizeObserver.unobserve(this.$el);
  },
}));

How you initialize this component will depend on your project's JavaScript setup. In most cases you should be able to wrap it in a alpine:init listener:

document.addEventListener('alpine:init', () => {
    // component code here
});

Blade template

You will also need to customize the rendered HTML and add the x-data directive to the <img> tag in responsiveImageWithPlaceholder.blade.php. Don't forget to remove the original onload handler.

Another piece of the puzzle is the wire:replace.self directive, which ensures that Livewire will not try to restore the component's state.

Here is an example with added line breaks for readability:

<img{!! $attributeString !!} @if($loadingAttributeValue) loading="{{ $loadingAttributeValue }}"@endif
    srcset="{{ $media->getSrcset($conversion) }}" sizes="1px"
    src="{{ $media->getUrl($conversion) }}" width="{{ $width }}" height="{{ $height }}"
    x-data="responsiveImage()"
    wire:replace.self>

[hussain-alkhatib]

hello, i test that alot of time and it work, you just need to add id and loading lazy
😊❤️
`

{!! $image->img()->attributes(['id' => \Illuminate\Support\Str::uuid(), 'loading'=>'lazy']) !!}

`