Passing asset path to blade component

[jesstucker]

Consider the following:

  @component('components.container, [
    'bg_img' => "{{@asset('images/hero.png') }}",
  ])
  @endcomponent

Renders:

<div style="background-image:url(' <?php echo e(@asset('images/hero.png')); ?> ')"
</div>

How do I pass the asset path string to the blade component?

[alwaysblank]

<x-container :bg_image="\Roots\asset('images/hero.png')"/>

[jesstucker]

Hey Alwaysblank,

Thank you for the response. I think it’s sending me in the right direction.

When I add this piece of markup, it renders literally, seemingly not reading the special x- syntax.
Does this have to be registered in site/web/app/themes/mytheme/app/Controllers? (by extending a “Sober” controller?)

[alwaysblank]

Oh, I didn’t know what version of Sage you’re on. IIRC you may need Sage 10 in order to use the <x- syntax for components.

In your case it would probably look more like this:

  @component('components.container', [
    'bg_img' => \App\asset_path('images/hero.png'),
  ])
  @endcomponent

The @asset directive is iirc just a proxy for the asset_path() function, so you can just call the function directly.

[jesstucker]

That’s the ticket! As always, thank you so much for your responses alwaysblank.