How do I eager load media that returns a url of each image conversion in the JSON response?

[corbin88]

I've built a Vue navigation component where I'd like to get the users avatar by passing it into a vue component property like so: :auth-user="{{Auth::user()}}". The problem is in the JSON response is the conversion URLs for the avatar collection aren't appearing. Just the file_name: "1550097973_corbin.jpg",

Do I just have to modify the filename string myself and modify it to the correct name like '1550097973_corbin.jpg' to '1550097973_corbin-profile_thumbnail.jpg'?

Or is there a simpler way that I can do this by eager loading another model that gives me all of the conversions paths?

User Model

public $with = ['media'];

public function registerMediaCollections()
{
    $this->addMediaCollection('avatar')->singleFile();

}


public function registerMediaConversions(Media $media = null)
{
    $this->addMediaConversion('profile_thumbnail')
          ->fit(Manipulations::FIT_CROP, 200, 200)
          ->withResponsiveImages()
          ->performOnCollections('avatar');

    $this->addMediaConversion('thumbnail')
          ->fit(Manipulations::FIT_CROP, 50, 50)
          ->performOnCollections('avatar');
}

nav.blade.php

<main-navigation :auth-user="{{Auth::user()}}" >
    @include('partials.user-bar')
</main-navigation>

[corbin88]

This works, but I'm not overly sure it's a good solution as I haven't thought it out enough yet. Essentially you just append the conversions to the JSON output like so:

User Model

protected $appends = ['profile_thumbnail','thumbnail'];

public function getProfileThumbnailAttribute()
{
    //Check if media has collection and return default.jpg if false
    if ($this->media->isEmpty()) {
        return 'default.jpg';
    } else {
        return $this->media->first()->getUrl('profile_thumbnail');
    }  
}

public function getThumbnailAttribute()
{
    //Check if media has collection and return default.jpg if false
    if ($this->media->isEmpty()) {
        return 'default.jpg';
    } else {
        return $this->media->first()->getUrl('thumbnail');
    }  
}

This will only really work if you eager load media public $with = ['media']; every time you get the user model. You can also add the isLoaded function to the conditions if you don't want to eager load media every time you get the user model.

https://laracasts.com/discuss/channels/laravel/how-to-check-if-an-relationship-has-been-eager-loaded-or-not

[spatie-bot]

Dear contributor,

because this issue seems to be inactive for quite some time now, I've automatically closed it. If you feel this issue deserves some attention from my human colleagues feel free to reopen it.