I am currently making a website for a client, and currently working on a feature for an admin dashboard to add events.
I put all my images in the public folder of the laravel project, in a folder named ‘images’, (e.g images/img1.jpg)
All of a sudden, when I made a new view and tried to insert my navbar there like so
create.blade.php
@extends('layouts.master')
@section('content')
@include('components.navbar')
@endsection
For reference, here is another view that I made which works completely fine
jadwal.blade.php
@extends('layouts.master')
@section('content')
@include('components.navbar')
<div class='hero flex d-flex flex-column justify-content-center align-items-center'>
<img class='section-bg' src="images/cross.jpg" alt="foto gereja">
<h1>ACARA</h1>
</div>
<div class='container-fluid flex d-flex flex-column p-3'>
@foreach ($events as $event)
<div class='event mt-3 p-3 container md-rounded d-flex flex flex-column'>
<h3 class=' mb-4 fw-bold'>{{$event->event_title}}</h3>
{{$event->event_date}}
<p>{{$event->event_time}}</p>
</div>
@endforeach
</div>
@include('components.footer')
@endsection
and here is the master layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script defer src='https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js'> </script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" href="css/app.css">
<title>Gereja Isa Almasih </title>
</head>
<body>
@yield('content')
</body>
</html>
this is my project folder structure
and these are the displays side by side (broken vs working)
What could possibly be the cause of this, and how do i fix it?
>Solution :
you must use the asset function to get the correct path to the images
<img class="section-bg" src="asset('images/cross.jpg')" alt="foto gereja">