In the Blade file source code, the CSS include URL is structured like this:
<link rel="stylesheet" href="{{ asset('frontend/css/bootstrap.min.css') }}" type="text/css">
However, when I check the page source in the browser, I see the following URL:
<link rel="stylesheet" href="http://127.0.0.1:8000/public/frontend/css/bootstrap.min.css" type="text/css">
What could be causing this discrepancy? And how can I eliminate the public segment from the URL?
The reason you're seeing "public" in the path is due to accessing your site using http://127.0.0.1:8000/public/.
To resolve this issue, you'll need to make changes to how your server serves the application.
The asset() function is used to direct to the public folder. In order for your CSS file to be functional, create a 'frontend' folder within the public directory.
I have a query that calculates the number of user votes for each star rating SELECT stars, COUNT(*) AS rate FROM product_user where product_id = 1 GROUP BY(stars) Here is the result of the query: stars | rate _____________ 2 | 3 5 | 4 However ...
My current task involves utilizing jQuery DOM elements to insert a few paragraphs into a div. The following code accomplishes this successfully: $('#detail_overlay').append($('<p />', { "class" : "detail_txt" }) .text( $(' ...
In my Vue application with TypeScript, I encountered an error during compilation that reads as follows: Failed to compile. ./src/style.scss (C:/../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!C:/.../node_modules/vue-loader/lib/loaders/stylePostL ...
This particular issue is causing frustration as it seems to only work with a specific set of images and not with others. The object in question is: function PreLoader(toLoad, parent, images) { var errored = 0; var loaded = 0; var toLoad = toLoad; ...
Is Flexslider not resizing its viewport height according to the current image on your site? The fixed height seems to be causing blank white space under shorter images. Are you inadvertently overriding Flexslider's responsive height function? Is there ...
I've been attempting to overlay a transparent color on top of a background image. While the background image is displaying correctly, I'm having trouble getting the color to show up. I noticed that this question has been asked before. I tried im ...
I am working with a menu structure that looks like this: <ul class"menu"> <li> <a>item1</a> <ul> <li><a>subitem1</a></li> <li><a>subitem2</a></li> &l ...
When working on an animation in javascript, I encountered a problem that I can't seem to identify. I am attempting to make the pan function work with the "mover" function, but it seems like either I am not using the properties correctly within the "tr ...
bolded text I am struggling to display two arrays side by side in an angular template. I attempted to use ngFor inside a div and span but the result was not as expected. A=[1,2,3,4] B=[A,B,C,D] Current Outcome using ngFor with div and span : Using Div : ...
I have a collection of JSON image URLs that I am using to populate a div with a variety of images. Initially, the images are set at opacity 0 and should gradually fade in through a for loop. Here is the jQuery code snippet: $.ajax('http://example.co ...
I have experimented with various methods, but none seem to work flawlessly. My goal is to neatly display around 50 images in rows and columns, adjusting the length of each row based on the screen width. Here are the approaches I've tried: Placing ...
<div class="a"> <img class="img_c" id="img_id" src="~~"> <div class="b"> <div class="c"> <ul class="d" id="e"> <li ~~~ > </ul> </div> </div> </div> Is there a way to display the ...
After completing my first web page using flexbox, I encountered an issue with the layout when viewed on a larger screen resolution (1894x787). The content appears stretched and distorted. Here are the screenshots for comparison: At 1326x768 https://i.sst ...
I've been trying to figure out how to achieve the following for a while now. I know I can solve this issue by using different h1 tags and positioning them separately, but I'm curious to find out if there's a way to do it without dividing the ...
Incorporating Bootstrap4 into my web application, I am faced with the task of displaying a menu exclusively on the large screen size setting (lg). The guidelines are straightforward: utilize a class to conceal an element across all screen sizes: .d-none ...
While exploring Laravel Blade, I observed that the @json($list) directive from the official documentation (https://laravel.com/docs/7.x/blade) gets converted to: <?php echo json_encode($list, 15, 512) ?> I was left wondering about the significance ...
My goal is to extract the value from the li attribute, id="@item1.TaskId", which is present in the li element when the page loads using jQuery. However, when the page loads and the jQuery script is executed, the value stored in the variable taskId (var tas ...
I created a Navbar using Bootstrap code but I am facing an issue where the 'active' state is not being applied to the Navbar elements on my webpage. I have been attempting to add and remove the active class on the Navbar elements, but I have bee ...
I am trying to add an SVG image next to some text in a navbar, but I'm running into some issues. The SVG is overflowing from the navbar instead of aligning inline with the text. Here's a snippet of my HTML code: ...
I have a dropdown menu with 9 different sections underneath 1. Section id=Hige x 3 2. Section id=Medium x 3 3. Section id=Low x 3 My goal is to show only the sections that correspond to the selection made in the dropdown menu. I am using jQuery to achi ...