Property [images] does not exist on this collection instance - laravel

Question

PLease I need help figuring out this problem, I have two model Event and EventImages with One-To-Many relationsip, each event can have multiple images, so I want to be able to loop through Events using the images method from the Event Model and display each event with one image from multiple images of that event on the index page, and make each image a link to the show page where there is Carousel that will display all the images belonging to that event. I keep getting this error
Property [images] does not exist on this collection instance.
This is the Event Model
class Event extends Model
{
protected $fillable = ['title', 'date', 'time', 'venue', 'body'];
public function images()
{
return $this->hasMany('App\EventImage');
}
}
Event migration
public function up()
{
Schema::create('events', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->string('date');
$table->string('time');
$table->string('venue');
$table->mediumText('body');
$table->timestamps();
});
}
This is EventImage Model
class EventImage extends Model
{
protected $fillable = ['images', 'caption','event_id'];
public function event()
{
return $this->belongsTo('App\Event');
}
}
EventImage migration
public function up()
{
Schema::create('event_images', function (Blueprint $table) {
$table->id();
$table->string('images');
$table->string('caption');
$table->integer('event_id')->unsigned();
$table->foreign('event_id')->references('id')->on('events')
->onDelete('cascade');
$table->timestamps();
});
}
This is the EventController
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Event;
use App\EventImage;
class EventController extends Controller
{
/**
* Display a listing of the resource.
*
* #return \Illuminate\Http\Response
*/
public function index()
{
$events = Event::all();
$imageEvents = $events->images->take(1);
return view('events.index', compact('events', $events, 'imageEvents',
$imageEvents));
}
This is the view
<div class="container">
<div class="tab_">
<ul>
<li>Recent Events</li>
<li>All Events</li>
</ul>
<section id="section1">
<div class="col s12 m7 s7">
#foreach ($events as $k => $event)
#if ($k % 2 == 0)
<div class="card horizontal">
<div class="card-image">
{{-- <img src="{{asset('images/amber-heard-7031-
2560x1600_1598312173.jpg')}}" class="fadeIn"> --}}
#foreach ($imageEvents as $imageEvent)
<a href=""><img class="img-fluid d-block card-img" style
="width:100%" src="{{asset('storage/images')}}/{{$imageEvent->images}}"
alt="">
</a>
#endforeach
</div>
<div class="card-stacked">
<div class="card-content">
<span class="card-title">{{$event->title}}</span>
<p>{{$event->body}}
</p>
</div>
<div class="card-action">
This is a link
</div>
</div>
</div>
</div>
<div class="col s12 m7">
#else
<div class="card horizontal" id="fadedfx">
<div class="card-stacked">
<div class="card-content">
<span class="card-title">{{$event->title}}</span>
<p>{{$event->body}}
</p>
</div>
<div class="card-action">
This is a link
</div>
</div>
<div class="card-image">
<a href=""><img class="img-fluid d-block card-img" style
="width:100%" src="{{asset('storage/images')}}/{{$imageEvent->images}}"
alt=""></a>
</div>
</div>
#endif
#endforeach
</div>
This is the Route
**Route::resource('events', 'EventController', [
'names'=> [
'index' => 'eventdex',
'create' => 'createvent',
'store' => 'storevent',
'show' => 'showevent',
'edit' => 'editevent',
'update' => 'updateevent',
'destroy' => 'destroyevent'
]
]);**
But when I make this changes to the EventController and save it
public function index(Request $request)
{
$events = Event::all();
$event = Event::find(49);
$imageEvents = $event->images->take(1);
return view('events.index', compact('events', $events, 'imageEvents',
$imageEvents));
}
it works fine except is not dynamic, I had to put in the event id the find method, and only one image show for all the events.