displaying responsive images spatiemedialibrary

[eduardonwa]

I have a collection of pictures for when I upload any image on the website named "thumbnails", and I want to generate and display the outcome of this on my frontend. On my model i registered a conversion by the name of "preview" which i pass on the controller.

Post.php

    public function registerMediaConversions(Media $media = null): void
    {
        $this
            ->addMediaConversion('preview')
            ->withResponsiveImages()
            ->fit(Manipulations::FIT_CROP, 300, 300)
            ->nonQueued();
    }

PostController

        $postImages= $latestPosts->each(function ($post) {
            $post->images = $post->getMedia('thumbnails')->map(fn ($image) => [
                        'src' => $image->getUrl(),
                        'srcSet' => $image->getSrcset('preview')
                    ]);
                    return $post;
                });

When i look at the inspector tab, it gives me the below output as html;

<img class="relative lg:absolute lg:inset-0 w-full h-96 lg:h-full object-top object-cover" src="<img  srcset=" http:="" localhost="" storage="" 9="" responsive-images="" pvhve57932bqjvpkkjdxbrtw0yrwcc-metaynatym9jlndlyna%3d-___media_library_original_644_430.webp="" 644w,="" pvhve57932bqjvpkkjdxbrtw0yrwcc-metaynatym9jlndlyna%3d-___media_library_original_538_359.webp="" 538w,="" pvhve57932bqjvpkkjdxbrtw0yrwcc-metaynatym9jlndlyna%3d-___media_library_original_450_300.webp="" 450w,="" pvhve57932bqjvpkkjdxbrtw0yrwcc-metaynatym9jlndlyna%3d-___media_library_original_377_252.webp="" 377w,="" pvhve57932bqjvpkkjdxbrtw0yrwcc-metaynatym9jlndlyna%3d-___media_library_original_315_210.webp="" 315w,="" pvhve57932bqjvpkkjdxbrtw0yrwcc-metaynatym9jlndlyna%3d-___media_library_original_264_176.webp="" 264w,="" pvhve57932bqjvpkkjdxbrtw0yrwcc-metaynatym9jlndlyna%3d-___media_library_original_220_147.webp="" 220w,="" pvhve57932bqjvpkkjdxbrtw0yrwcc-metaynatym9jlndlyna%3d-___media_library_original_184_123.webp="" 184w,="" pvhve57932bqjvpkkjdxbrtw0yrwcc-metaynatym9jlndlyna%3d-___media_library_original_154_103.webp="" 154w,="" data:image="" svg+xml;base64,pcfet0nuwvbfihn2zybqvujmsumgii0vl1czqy8vrfreifnwryaxljevl0voiiaiahr0cdovl3d3dy53my5vcmcvr3jhcghpy3mvu1zhlzeums9eveqvc3znmteuzhrkij4kphn2zyb2zxjzaw9upsixljeiihhtbg5zpsjodhrwoi8vd3d3lnczlm9yzy8ymdawl3n2zyigeg1sbnm6egxpbms9imh0dha6ly93d3cudzmub3jnlze5otkvegxpbmsiihhtbdpzcgfjzt0ichjlc2vydmuiihg9ijaicib5psiwiib2awv3qm94psiwidagnjq0idqzmci+cgk8aw1hz2ugd2lkdgg9ijy0ncigagvpz2h0psi0mzaiihhsaw5romhyzwy9imrhdge6aw1hz2uvanblzztiyxnlnjqslzlqlzrbqvfta1pkumdbqkfrrufzqujnqufely9nqtdrmupguvzsufvqb2damlf0yw5cbfp5qjjnuzr3sunomwmybhvaeujku2tjz1nsqkzseuiyt0rbcexdqnhkv0zzyvhsnulemgdpvefllzlzqvf3qurbz0leqwdjref3turcqu1eqkfvsujrvuvcqvvlqndjr0nbd0teqxdmq2dzterrnfnfqtbprve0ten4qvdfqkvurkjvvkzrd1bgegdxrkjnu0zcvvuvoxnbuxdfrejbuuzcqvvkqlfvskzbmexeulfvrkjrvuzcuvvgqlfvrkjrvuzcuvvgqlfvrkjrvuzcuvvgqlfvrkjrvuzcuvvgqlfvrkjrvuzcuvvgqlfvrkjrvs84quffuwdbrlfbz0f3rvjbqulsqvfnukfml0vbqjhbquffrkfrrujbuuvcqufbqufbqufbqufcqwdnrujrwuhdqwtlqy8vrufmvvfbqulcqxdnq0jbtuzcuvffqufbqmzrrunbd0ffrvfvu0lurkjcae5swvfjawnsuxlnwkdoq0noq3njrvzvdeh3skroawnvsupdaflyr0jryuptww5lq2txtkrvmk56zzvpa05fulvasfnfbetvmvjwvmxkwvdwcgpar1ztwjjocgfutjbkwfozzuhsnmc0u0zob2vjavlxu2s1u1zscgvzbvpxaw82u2xwcwvvcwfxexm3uzf0cmu0dwjyq3c4vez4c2zjewnyuza5vfyxdgzzmmryadr1ugs1zwjunk9ucthmtho5ufgyos9qnst2l0vbqjhcqufnqkfrrujbuuvcqvffqufbqufbqufcqwdnrujrwuhdqwtlqy8vrufmvvjbqulcqwdrruf3uuhcuvffquffq2r3qujbz01sqkfvae1rwvnrvkviwvhfvelqs0jdqljda2fhehdra2pnmux3rldketbrb1dkrfrosmzfwedca2fkawnvs1nvmu5qyzrpvhbeukvwr1iwaeptbe5vvlzawfdgbgfzmljswm1kb2fxchpksfyyzdnonwvvs0rosvdhadrpsmlws1rssldxbdvpwm1xs2pws1dtcdzpchfys3p0tfcydddpnxvzter4tvhhedhqsnl0tfqxtlhxmtlqwjj1tgo1t1htnstqcdz2tho5ufgyos9qnst2l2fbqxdeqvfbq0vrtvjbrdhbk0wwq2ezrgnychdwsvbgzlfwnwv4dee5wjj0ekk4ddflrjj2wkzwu2vhoctznzzusznkbxbvzwxyrwnnbuiyz2rhoctsy2recluxs0uynwhluu1umxjdehz6sg9yago0qytlcg9ndke2ee1prnhyzmlxm05qutvovgt2seh3m3uvrgw4uk5bwxr2m2lswe43wnrxwxiyttd3mtrml3rxenvramtgqvrtcznjt1k0yldfylrmmljgbhl3tmjsanpjce0vumi0vmvmtdnxl0jzdxfubgzpalvrs0j4wepknmpumfbrbjq1l0vmvxrhofjyvu11efuzrwzmvldnce04mzazeezlywzbognmn1ezwezoswk1awewz2xpodlpuzu1snjyam9qytjsei8vmle9psi+cgk8l2ltywdlpgo8l3n2zz4="32w&quot;" onload="window.requestAnimationFrame(function(){if(!(size=getBoundingClientRect().width))return;onload=null;sizes=Math.ceil(size/window.innerWidth*100)+'vw';});" sizes="1px" width="644" height="430">

It generates all of the images needed, as i think it returns everything from the collection but it is not displaying images, just the strings.

On my view/blade file "home.blade.php", this is how im attempting to recover the images and the collection;

                <img
                    class="relative lg:absolute lg:inset-0 w-full h-96 lg:h-full object-top object-cover"
                    src="{{ $latestPost->getFirstMedia('thumbnails') }}"
                    srcset="{{ $postImages->first()->getFirstMedia('thumbnails')->getSrcset() }}"
                    alt="Thumbnail of the newest post"
                >

I don't receive images instead just the html (picture below) i would like to display the images from the collection.

SpatieMediaLibrary version : * 10.11.3 | Filament version: v2.17.52