Is Responsive images only for Blade and not vue.js?

[cjlaborde]

I been studying the docs to figure out how to use responsive images with vue.js.

https://docs.spatie.be/laravel-medialibrary/v8/responsive-images/getting-started-with-responsive-images/
This is the blade example

My greyscale responsive image

{{ $media('my-conversion') }}

Yet have not figure out how to get the responsive images to display from the Get request with Axios.

[muhghazaliakbar]

I have same problem to generate responsive image in vue.js

[borovez]

I have this exact same problem... I would like to query for the responsive srcset on demand via an API route for my vue.js

I am generating the responsive images like so:

$this->addMediaConversion('thumb')
            ->width(130)
            ->height(130)
            ->fit(Manipulations::FIT_CROP, 130, 130)
            ->withResponsiveImages()
            ->nonQueued();

The responsive images are successfully generated, however, when I query for the Media collection with getMedia(), the media objects returned do not contain any data in the responsive_images array:

Spatie\MediaLibrary\MediaCollections\Models\Media {#3556
         id: 12,
         model_type: "App\Product",
         model_id: 125,
         uuid: "1a509bbf-dc4d-4e44-9618-6612f0c32a3e",
         collection_name: "product_gallery",
         name: "Hero-image8",
         file_name: "56bb729f53bf74faa4b34b46ac31af11.jpg",
         mime_type: "image/jpeg",
         disk: "public",
         conversions_disk: "public",
         size: 34612,
         manipulations: "[]",
         custom_properties: "{"generated_conversions": {"large": true, "thumb": true, "medium": true}}",
         responsive_images: "[]",
         order_column: 3,
         created_at: "2020-05-05 18:11:21",
         updated_at: "2020-05-05 18:11:21",
},

[cjlaborde]

It seems default image when there is no image is also not working with media library when using vue.js. Getting a Call to a member function getUrl() on null

[MMTE]

same issue here

[jayenne]

I had a similar problem whilst creating a livewire/alpinejs slideshow. The problem is that the blade component {{ $img('myResponsiveConversion') }} is rendered to <img srcsrceset /> tags before being output and so livewire/alpinejs can't interact with them in the way I needed. I had to replicate this tag serverside rather than in blade, then return it as a string (or collection of strings). I'm not sure if it helps you guys, but as I couldnt find a method to get responsive images I created one on my component to do what I needed then retur nit as a public property.

My help was in the source of media-library's own blade templates found in their vendor/spatie/laravel-media-library/ folders.

It may help someone.

private function getResponsiveImageTagStrings($media, $conversionName): object
    {       
        $items = $media->map(function ($item) use ($conversionName) {
            $responsiveImage = $item->responsiveImages($conversionName)->files->first();
            $width = $responsiveImage->width();
            $height = $responsiveImage->height();
            $src = $responsiveImage->fileName;
            $srcset = $item->getSrcset($conversionName);
            $name = $item->name;
            $onload="window.requestAnimationFrame(function(){if(!(size=getBoundingClientRect().width))return;onload=null;sizes=Math.ceil(size/window.innerWidth*100)+'vw';});";
            $str = '<img src="'.$src.'" srcset="'.$srcset.'" sizes="1px" width="'.$width.'" height="'.$height.'" alt="'.$name.'" onload="'.$onload.'" />';
            return $str;
        });
        return $items;
    }

[jayenne]

if needed, you can check if your $media item has any responsive conversions before hand with $hasResponsiveImages = $item->hasResponsiveImages($conversionName);

[rahmanramsi]

U can use this :

$media = $yourModel->getFirstMedia();

$responsiveImg  = $media('conversionName');

[mchev]

For a vuejs/inertia app i used this :

$gallery = $model->getMedia('gallery')->map(function($media) {
    return [
        'id' => $media->id,
        'thumb_url' => $media->getUrl('thumb'),
        'responsive' => $media('responsive')->toHtml(),
        'alt' => '',
        'caption' => '',
    ];
});

The key is here : $media('responsive')->toHtml()

[ercanertan]

Nice one @mchev !
We can also add class for image!

$gallery = $model->getMedia('gallery')->map(function($media) {
    return [
        'id' => $media->id,
        'thumb_url' => $media->getUrl('thumb'),
        'responsive' => $media('responsive')->toHtml(),
        'responsive_with_class' => $media->img()->attributes([ 'class' => 'object-cover rounded-lg shadow-lg'])->toHtml(),
        'alt' => '',
        'caption' => '',
    ];
});

[arhymingape]

You could also do it like this if you want to keep the styling in the front end.
<div v-html="work.url.srcset" class="object-cover rounded-lg shadow-lg"></div>