I’m copying the example from the docs and can’t get an image to render or the component to even recognize I’m passing a value. It keeps saying it’s null
I have verified that my variable $callout_image contains the image ID in the same file calling the component
template rendering component
<x-callout title={{$callout_title}} :image_id="$callout_image">
{!!$callout_content!!}
</x-callout>
Component view file
<div {{$attributes}} class="border border-neutral-50/30 bg-slate-50/10 rounded-tr-3xl rounded-bl-3xl">
@if($imageElement)
<figure>{!! $imageElement !!}</figure>
@endif
@dump($imageElement)
<div class="p-4">
<h2 class="text-xl">{{$title}}</h3>
{!! $slot !!}
</div>
</div>
COmponent Composer
<?php
namespace App\View\Components;
use Illuminate\View\Component;
class Callout extends Component
{
public $imageElement;
protected $image_id;
/**
* The callout title
*
* @var string
*/
public $title;
/**
* Create a new component instance.
*
* @return void
*/
public function __construct( $title, $image_id = null)
{
$this->title = $title;
$this->image_id = $image_id;
$this->imageElement = $this->getImage();
}
protected function getImage()
{
if (!is_numeric($this->image_id)) {
return false;
}
return wp_get_attachment_image($this->image_id, 'medium_large');
}
/**
* Get the view / contents that represent the component.
*
* @return \Illuminate\Contracts\View\View|\Closure|string
*/
public function render()
{
return view('components.callout');
}
}