How can I solve net::ERR_ABORTED 404 (Not Found) in a view, error dont let display the css Laravel 6.0?

I am doing a view and when I send the information that, I want to show to that view send the error that I show above and the view is displayed with html only. This error doesn’t happen when I did not send information to the view. I don’t know, how to solve it.

Says exactly like thisGET http://127.0.0.1:8000/entradas/1/comprar/1/detalle_ventaEntrada/200000/css/bootstrap.min.css net::ERR_ABORTED 404 (Not Found) and GET http://127.0.0.1:8000/entradas/1/comprar/1/detalle_ventaEntrada/200000/js/jquery.stellar.min.js net::ERR_ABORTED 404 (Not Found) in the console with every js or css in the stylesheet and scripts
Below I will let the code of my scripts, the links in the head and also the information I want to show

<link stylesheet="" href=""> and script ind head tag

<head>
    <title>ACAVUCAB</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script src="{{ asset('js/app.js') }}" defer></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/open-iconic-bootstrap.min.css">
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/owl.carousel.min.css">
    <link rel="stylesheet" href="css/owl.theme.default.min.css">
    <link rel="stylesheet" href="css/magnific-popup.css">
    <link rel="stylesheet" href="css/aos.css">
    <link rel="stylesheet" href="css/ionicons.min.css">
    <link rel="stylesheet" href="css/bootstrap-datepicker.css">
    <link rel="stylesheet" href="css/jquery.timepicker.css">
    <link rel="stylesheet" href="css/flaticon.css">
    <link rel="stylesheet" href="css/icomoon.css">
    <link rel="stylesheet" href="css/style.css">
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>

JavaScript
​x
 
<head>    <title>ACAVUCAB</title>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">    <script src="{{ asset('js/app.js') }}" defer></script>    <link rel="stylesheet" href="css/bootstrap.min.css">    <link rel="stylesheet" href="css/open-iconic-bootstrap.min.css">    <link rel="stylesheet" href="css/animate.css">    <link rel="stylesheet" href="css/owl.carousel.min.css">    <link rel="stylesheet" href="css/owl.theme.default.min.css">    <link rel="stylesheet" href="css/magnific-popup.css">    <link rel="stylesheet" href="css/aos.css">    <link rel="stylesheet" href="css/ionicons.min.css">    <link rel="stylesheet" href="css/bootstrap-datepicker.css">    <link rel="stylesheet" href="css/jquery.timepicker.css">    <link rel="stylesheet" href="css/flaticon.css">    <link rel="stylesheet" href="css/icomoon.css">    <link rel="stylesheet" href="css/style.css">    <link href="{{ asset('css/app.css') }}" rel="stylesheet"></head>​

scripts

<script src="js/jquery.min.js"></script>
  <script src="js/jquery-migrate-3.0.1.min.js"></script>
  <script src="js/popper.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/jquery.easing.1.3.js"></script>
  <script src="js/jquery.waypoints.min.js"></script>
  <script src="js/jquery.stellar.min.js"></script>
  <script src="js/owl.carousel.min.js"></script>
  <script src="js/jquery.magnific-popup.min.js"></script>
  <script src="js/aos.js"></script>
  <script src="js/jquery.animateNumber.min.js"></script>
  <script src="js/bootstrap-datepicker.js"></script>
  <script src="js/scrollax.min.js"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&sensor=false"></script>
  <script src="js/google-map.js"></script>
  <script src="js/main.js"></script>

JavaScript
 
<script src="js/jquery.min.js"></script>  <script src="js/jquery-migrate-3.0.1.min.js"></script>  <script src="js/popper.min.js"></script>  <script src="js/bootstrap.min.js"></script>  <script src="js/jquery.easing.1.3.js"></script>  <script src="js/jquery.waypoints.min.js"></script>  <script src="js/jquery.stellar.min.js"></script>  <script src="js/owl.carousel.min.js"></script>  <script src="js/jquery.magnific-popup.min.js"></script>  <script src="js/aos.js"></script>  <script src="js/jquery.animateNumber.min.js"></script>  <script src="js/bootstrap-datepicker.js"></script>  <script src="js/scrollax.min.js"></script>  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&sensor=false"></script>  <script src="js/google-map.js"></script>  <script src="js/main.js"></script>​

things i want to show in the view

@foreach ($detalle_venta_entrada as $item)
                                <td class="image-prod"><div class="img" style="background-image:url(ticket_event.jpg);"></div></td>
                                <td class="product-name">
                    <h3>{{$item->numero_entrada}}</h3>
                                <p>Esta entrada es de uso unico y exclusivo para este evento</p>
                                </td>
                  <td class="price">{{$item->precio}}}</td>
                  <td>{{$item->fecha}}</td>
                              <td class="total">{{$item->precio}}</td>
                              </tr><!-- END TR-->
                  @endforeach

JavaScript
 
@foreach ($detalle_venta_entrada as $item)                                <td class="image-prod"><div class="img" style="background-image:url(ticket_event.jpg);"></div></td>                                <td class="product-name">                    <h3>{{$item->numero_entrada}}</h3>                                <p>Esta entrada es de uso unico y exclusivo para este evento</p>                                </td>                  <td class="price">{{$item->precio}}}</td>                  <td>{{$item->fecha}}</td>                              <td class="total">{{$item->precio}}</td>                              </tr><!-- END TR-->                  @endforeach​

Answer

http://127.0.0.1:8000/entradas/1/comprar/1/detalle_ventaEntrada/200000/css/bootstrap.min.css

JavaScript
 
http://127.0.0.1:8000/entradas/1/comprar/1/detalle_ventaEntrada/200000/css/bootstrap.min.css​

Here you can see your .css file is trying to load from this url, which is not correct.

Use laravel built in asset() function.

https://laravel.com/docs/master/helpers#method-asset

Which will point to public folder of your application so:

use asset('expamleFolder/bootstrap.js'), it will look for your bootstrap.js inside public/expamleFolder.

Note: always keep assets in public folder.

Replace this with old code

<link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ asset('js/jquery.stellar.min.js') }}">

JavaScript
 
<link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}"><link rel="stylesheet" href="{{ asset('js/jquery.stellar.min.js') }}">​

this is solution for that 2 error

Advertisement

Answer