Laravel 4 框架中的 CSS 图像、图像和字体

CSS Images, Images, and Fonts in Laravel 4 Framework

提问by user1072337

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 4 框架时遇到了一些问题。首先，为了进行设置，我在公共文件夹中有一个资产文件夹，其中包含一个名为“CSS”的 css 文件夹、一个名为“images”的图像文件夹和一个名为“webfonts”的字体文件夹。以下是路径：

/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:

CSS 文件夹内是我的主要 CSS 文件 style.css。我正在尝试使用图像作为我在此 CSS 文件中调用的背景。这是代码：

.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 调用这个 CSS：

<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:

进入下一个。不使用 CSS，我只是想显示一个简单的图像。我试过了：

<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:

最后，再次在 CSS 中，我尝试使用我放在上面提到的 webfonts 文件夹中的字体文件。但是，字体再次不起作用。我知道 CSS 文件已正确上传到页面，因为文本的颜色发生了变化，但未应用字体。这是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.

我使用的视图是刀片文件 (landing.blade.php)。这一切都在本地主机上，使用 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.

非常感谢您对这一切的帮助。我是 Laravel 的新手，我已经让所有这些都在一个实时站点的框架之外工作。非常感激你的帮助。

回答by Jerska

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"

查看删除的“/assets”

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

因为如果我弄好了，你的树形是这样的：

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

• 资产
  • CSS
    • 样式文件
  • 图片
    • 8662834823_575a23516d_o.jpg

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

对于您的第二个问题，请尝试/在您的 URL 开头添加一个：

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

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

因为我相信资产位于您服务器的根部。

回答by Raul Fernandez Marques

add font face in a main.blade.php:

在 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:

然后在您的 scss 或 css 中使用：

body{
  font-family: Roboto;
}

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

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

then you don′t have problems when public your app

那么当你公开你的应用程序时你就没有问题