CSS Images, Images, and Fonts in Laravel 4 Framework

问题

I am having some trouble with a few things with the Laravel 4 Framework. First, to give the setup, I have an assets folder, within my public folder, that contains a folder for css called "CSS", a folder for images called "images", and a folder for fonts called "webfonts". Here are the paths:

/laravel-master/public/assets/CSS

/laravel-master/public/assets/images

/laravel-master/public/assets/webfonts

Inside the CSS folder is my main CSS file, style.css. I am trying to use an image as a background that I call within this CSS file. Here is the code:

.banner-image{
    background: transparent url('../assets/images/8662834823_575a23516d_o.jpg') no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    height: 800px;
    min-width: 1200px;
}

I have also tried:

.banner-image {
background: url('assets/images/8662834823_575a23516d_o.jpg');
}

and:

.banner-image {
background: url('/assets/images/8662834823_575a23516d_o.jpg');
}

Within my view, I call this CSS with the div:

<div class="banner-image"></div>

Both of these result in the page remaining blank. The image is not showing up, and I am not sure why.

On to the next one. Without using CSS, I am just trying to have a simple image show up. I have tried:

<img src="{{asset('assets/images/fanssignupsplash.png')}}">

and:

{{HTML::image('images/fanssignupsplash.png')}}

and:

{{HTML::image('assets/images/fanssignupsplash.png')}}

All of these result in the broken image symbol. The image is not showing up.

Finally, in CSS again, I am trying to use fonts files that I have put in the webfonts folder mentioned above. However, again the font is not working. I know the CSS file is being uploaded correctly to the page, because the color changes on the text, but the font is not being applied. Here is the CSS:

@font-face {

  font-family:'proxima-nova';
  src:url('/assets/webfonts/proximanova-bold-webfont.eot');
  src:url('/assets/webfonts/proximanova-bold-webfont.eot?#iefix') format("embedded-opentype"),url('/assets/webfonts/proximanova-bold-webfont.woff') format("woff"),url('/assets/webfonts/proximanova-bold-webfont.ttf') format("truetype"),url('/assets/webfonts/proximanova-bold-webfont.svg#ProximaNovaBold') format("svg");
  font-weight:bold;
  font-style:normal

  }

The view I am using is a blade file (landing.blade.php). This is all on localhost, using MAMP.

Thank you very much for your help with all of this. I am new to Laravel, and I have gotten all of this to work outside of a framework on a live site. Your help is very much appreciated.

回答1:

I stopped on your first question, first tried solution.

Shouldn't it be this :

.banner-image{
    background: transparent url('../images/8662834823_575a23516d_o.jpg') no-repeat center center;
    ...
}

See the removed "/assets"

Because if I got it well, your arborescence is like this:

assets
- CSS
  - style.css
- images
  - 8662834823_575a23516d_o.jpg

For your second question, try to add a / at the beginning of your URL :

{{HTML::image('/assets/images/fanssignupsplash.png')}}

since I believe assets is at the root of your server.

回答2:

add font face in a main.blade.php:

  <style>
    <?php $url = asset('plugins/font/Roboto-Regular.tff') ?>
    @font-face {
        font-family: Roboto;
        src: {{$url}};
    }
  </style>

you can write also:

  <style>
    @font-face {
        font-family: Roboto;
        src: {{asset('plugins/font/Roboto-Regular.tff')}};
    }
  </style>

then in your scss or css use:

body{
  font-family: Roboto;
}

https://laravel.com/docs/4.2/helpers#urls

then you don´t have problems when public your app

来源：https://stackoverflow.com/questions/17154783/css-images-images-and-fonts-in-laravel-4-framework

标签

css

laravel

laravel-4