Image path with two indices


Have a Laravel app using VueInstantSearch. The way the images are stored is in a separate table from the Model. So there is a Model table and a Media table. The media table has a foreign key, model_id.

The two indices are model and media.

When I add this line:

<div class="search-panel__results">


        <template slot="item" slot-scope="{ item }">
            <a :href="'/jobs/' + item.slug"> <ais-highlight :hit="item" attribute="jobtitle"></ais-highlight></a>

        <img :hit="item" attribute="model_id" :src=“'/storage/' + item.model_id + '/conversions/' + item.file_name” :hit="item" attribute="model_id" width=200 height=120   alt=""/>



The item.model_id does not pull from the media table.

Is this possible to set up?

The other approach I thought was to us a regex and strip the
objectID:Spatie\MediaLibrary\Models\Media::9 from the integer and use the php implementation in the VueComponent:

    imageUrl: {!! json_encode($job->getMedia('document')->first()->getUrl('thumbnail')) !!}

Which approach makes the most sense? Thank you ~

Hi @BidBird,

If I understand correctly when referencing the item in your code snippet, this refers to an item in the Media table that is indexed as an Algolia record. This item in the Media table has a foreign key model_id that you would want to access in your Vue template.

To confirm:

  • Are you inquiring, how can you get the model_id attribute indexed to your Algolia record so that it is available for reference?
  • Or are you saying the model_id is successfully indexed to your record but there is an issue in accessing it in the Vue template?

Thank you!

Hi there, thank you. @ajay.david

It’s switched ~ The item = Model. In the case above item.slug = model->slug

So, I’m trying to figure out how to reference the media.model_id (essentially)

In the algolia dashboard both indices are correctly indexed. My trouble is if model = item. How do you display the Media?

Because there are two indices it’s confusing as to how to generate the path. Should the path be generated via php and then displayed via the vue component?

Or should the vue component concatenate the proper keys from the algolia indices ?

This uses the Laravel/MediaLibrary package.

Hi @BidBird,

Thank you for clarifying that:

  • The item = model therefore item.slug = model->slug
  • So you need to understand how to get media.model_id so that you can use that data to build an image path

If you are displaying the model then the best option is to add the attribute model_id to your model record. More on this below.

From the perspective of your database/source-of-truth this might not make sense, but Algolia is different and not your database. You can take advantage of the idea that Algolia records are schemaless. They can have any data you want in the JSON record.


  • When indexing your model records in Laravel, customize your records and add the model_id so that it is already available in that exact model record:

Hi @ajay.david

You know I was trying that function. Let me play around with it a little more this weekend and I’ll get back to you monday. Might be easier than I’ve made it out to be!

Have a good weekend ~

1 Like