After I added a parameter to the route, for all images in page I got error : not found resource error

Question

enter image description here

I have a page for show a list (online courses). For every course, I show title, ... and image. Everything was well.

After I added a parameter to route for this page, all images got error : not found resource.

<!--in menu:-->
                            
@if (isset($userInfo) And ($userInfo->role == 'admin' or $userInfo->role == 'teacher'))
<!-- old ahref link -->
<!-- <a class="dropdown-item" href="\courses_panel"> -->

<!-- new ahref link -->
<a class="dropdown-item" href="\courses_panel\{{$userInfo->id}}">
  Cources Management Panels
</a>                              
@endif   

<!--//////////////////////////////////////////////////////////////-->
<!--in web.php-->
<!--the last route : -->
<!--Route::get('/courses_panel', 'CoursesPanel@index');-->

<!--new -->
<?php
Route::get('/courses_panel/{id}','CoursesPanel@index')
   ->name('Courses_panel');
?>

<!--///////////////////////////////////////////////////////////////-->
<!-- in controller -->

<!-- I just add parameter and where -->
<?php
    public function index($userId)
    {
        $courses = Course::where('course_author' , '=' , $userId)->get();
        $categories = Category::all();
        return view('courses_panel' , compact("courses" , 'categories'));
    }
?>
<!--///////////////////////////////////////////////////////////////-->
<!-- in courses Page -- without change-->

@foreach ($courses as $course)
           <img class="rounded img-responsive courseImage" 
src="images/{{$course->course_image}}" alt="" name="" > 
@endforeach

Answer 1

I think your issue is how you are you are defining your image path in the <img> tag

Try an absolute path (leading /)

<img class="rounded img-responsive courseImage" src="{{asset('/images/'.$course->course_image)}}" alt="" name="" >

Explanation:

Case 1:

if the src attribute is not leading with / for example images/test.png, the link to that image will depend on the URL of the page you are on

http://www.example.com/ => http://www.example.com/images/test.png

http://www.example.com/some_page => http://www.example.com/images/test.png

http://www.example.com/some_page/sub_page => http://www.example.com/some_page/images/test.png

http://www.example.com/some_page/sub_page/ => http://www.example.com/some_page/sub_page/images/test.png

Case 2:

if the src attribute is leading with / for example /images/test.png, the link to that image will NOT depend on the URL of the page you are on but it can break domains that have ports in the url

http://www.example.com/some_page/sub_page/ => http://www.example.com/images/test.png

http://localhost:6080/some_page/sub_page/ => http://localhost/images/test.png

Best practice

To avoid all that, it's better to write the public path of the image with the complete domain //example.com/images/test.png. That way it will work every time.

You will notice that the path starts with double slash //, that way it will be:

http://example.com/images/test.png if you are on a http:// page

and

https://example.com/images/test.png if you are on a https:// page

Laravel

$url = asset('img/photo.jpg'); // http(s)://example.com/assets/img/photo.jpg
$url = secure_asset('img/photo.jpg'); // https://example.com/assets/img/photo.jpg

more info in the documentation asset() , secure_asset()

ps: if asset() is called from CLI environment it will use the env variable APP_URL to build the link