I'm doing a little website for me with Laravel 8.0.
Inside home.blade.php, I have this : <link rel="stylesheet" href="{{ asset('css/header.css') }}">
But when I go to my browser, no css in my page. Inside the developper tools, it says <link rel="stylesheet" href="http://localhost/css/header_site.css">.
I have all my css inside the public/assets/css folder.
I also used the VirtualHost inside httpd-vhosts.conf where I do DocumentRoot "C:/xampp/htdocs/my-project/public".
Cordially
Try configuring the assets url in the .env file. ASSET_URL=http://localhost/assets/. Then do {{asset('css/header.css')}}
Related
I downloaded my laravel project from live serve (shared hosting) to local hosting because I want to make some changed in the code. I added a new index.php file to the public folder and run composer update and composer install commands and managed to run the project on local server (I use Laragon server on windwos). However, the project can not upload the resource. The resource are located in the public floder and linked using {{asset}} function and {{assetversion}} methods. Honestly, I do not know about the use of version. The code in like that
<link rel="stylesheet" href="{{ asset('public/frontend/infixlmstheme') }}/css/fontawesome.css{{assetVersion()}} ">
<link rel="stylesheet" href="{{asset('public/backend/css/themify-icons.css')}}{{assetVersion()}}"/>
<link rel="stylesheet" href="{{ asset('public/frontend/infixlmstheme') }}/css/flaticon.css{{assetVersion()}}">
<link rel="stylesheet" href="{{ asset('public/frontend/infixlmstheme') }}/css/nice-select.css{{assetVersion()}}">
<link rel="stylesheet" href="{{ asset('public/frontend/infixlmstheme') }}/css/notification.css{{assetVersion()}}">
<link rel="stylesheet" href="{{ asset('public/frontend/infixlmstheme/css/mega_menu.css') }}">
When I check the path in chrom dev tools, the link points to the right folder (except the version in not in the file name). such as
<link rel="stylesheet" href="http://127.0.0.1:8000/public/frontend/infixlmstheme/css/fontawesome.css?v=5.0.0 ">
and the folder in with same path starting from public.
However, the recourse is not connected and the error massage is shown in the attached image fro chrom dev tools.
I appreciate you help guys and thank you in advance for your time and expertise.
I have assempution the error is from {{assetversion}} but I could not find the version in the file name. I do not know a lot about the frontend how the asset version work.
My CSS and JS file work fine on localhost but when up to host it not working.
I use laravel 5.4. I tried a lot of ways but still failed.
enter image description here
My embedded CSS and JS code
enter image description here
UPDATE: Thanks all i have fixed my problems follow this:
1. change http://localhost to https://localhost at APP_URL line in .env file
2. add \URL::forceScheme('https') to AppServiceProvider.php file in boot() function
3. the last is include {{asset('--link_on_href--')}} for each CSS and JS embeded on index.php
Use the asset() helper to include assets in your view. This will automatically generate the appropriate URL for the included files based on you APP_URL in your .env file.
For CSS,
<link href="{{ asset('css/app.css') }}" rel="stylesheet" type="text/css" >
Or
<link href="{{ URL::asset('css/app.css') }}" rel="stylesheet" type="text/css" >
For JS,
<script type="text/javascript" src="{{ asset('js/custom.js') }}"></script>
Or
<script type="text/javascript" src="{{ URL::asset('js/custom.js') }}"></script>
For Images and other such assets,
{{ asset('img/photo.jpg'); }}
Link to the Docs
I install Twitter Bootstrap using composer and can easily include the CSS like this:
<link href="{{ URL::asset('css/app.css') }}" rel="stylesheet">
However, when I install Font Awesome using composer in the same way, I don't see any CSS files added to that folder. The one CSS file created by Font Awesome is in /app/vendor/components/font-awesome.
How do I include the downloaded Font Awesome CSS into HTML?
Thank you.
Just put the downloaded css file inside public/css/ directory and add following line in your view file.
<link rel="stylesheet" href="{{ asset('css/font-awesome.min.css') }}">
And, Make sure your directory structure should like this:
public/css/font-awesome.min.css
public/fonts/
So that, icon will be displayed properly.
I've just installed a Laravel 5 project on XAMPP and my pages are not finding the css files.
This is the link to my css in my public folder:
{{ URL::asset('codepath') }}
{!! ('codepath') !!}
Link to CSS should look like this:
<link rel="stylesheet" href="{{ asset("css/my.css") }}" />
To make it work, my.css file should be placed at laravelProject\public\css\my.css.
If this doesn't work, then you should setup XAMP properly and point web server to a public directory which is inside laravel project root.
Your link to CSS file should be like
<link rel="stylesheet" href="{{ asset("yourcssfile.css") }}" />
OR
<link rel="stylesheet" href="{{ url("yourcssfile.css") }}" />
And your file should be in public directory of your project e.g yourproject/public/yourcssfile.css
That's it!
This is my gulpfile.js
var elixir = require('laravel-elixir');
elixir(function(mix) {
mix.less([
'style.less'
], 'public/css/style.css')
.styles([
'reset.css',
'font-awesome.min.css',
'style.css'
], 'public/css/app.css', 'public/css')
.scripts(['jquery-1.12.0.min.js', 'main.js'], 'public/js/app.js', 'resources/assets/scripts')
.version(['css/app.css', 'js/app.js']);
});
As result I get files
public/build/app-2a14246111.css
public/build/app-7790e07dfb.js
public/build/rev-manifest.json
but when I try to add css and js files to layout
<link rel="stylesheet" href="{{ elixir("css/app.css") }}">
<script src="{{ elixir("js/app.js") }}"></script>
I get
<link rel="stylesheet" href="/build/css/app-2a14246111.css">
<script src="/build/js/app-7790e07dfb.js"></script>
and browser can't find them because it tries to find
http://localhost:8080/build/css/app-2a14246111.css
http://localhost:8080/build/js/app-7790e07dfb.js
and project folder name and public folder are missed somehow in paths. How to fix it?
Actually I see, I can add dot in paths like
<link rel="stylesheet" href=".{{ elixir("css/app.css") }}">
<script src=".{{ elixir("js/app.js") }}"></script>
and then all will work, but I don't like this kind of fix.
That's because you're running the Laravel project on localhost. When you deploy the project to a server, the problem resolves itself (assuming it's configured correctly).
If you're using Apache, you can add a Virtual Host configuration so that instead of http://localhost:8080/laravel/public you can use something like http://domain-name.app:
<VirtualHost *:80>
DocumentRoot "C:\Users\username\path\to\laravel\public"
ServerName domain-name.app
</VirtualHost>
And then in your hosts file add:
127.0.0.1 domain-name.app
This way, you can link to absolute paths in your HTML like /css/somefile.css instead of ./css/somefile.css.
Checkout Homestead, from Laravel, it helps to avoid a lot of pain in the ass.
FWIW... you can also wrap the elixir tags with URL::asset like this:
<link href="{{ URL::asset(elixir('css/app.css')) }}" rel="stylesheet">
That solved my issue and still allowed me to run on port 8888.