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

【问题标题】：CSS Images, Images, and Fonts in Laravel 4 FrameworkLaravel 4 框架中的 CSS 图像、图像和字体
【发布时间】：2013-06-13 20:03:21
【问题描述】：

我在使用 Laravel 4 框架时遇到了一些问题。首先，为了进行设置，我在公用文件夹中有一个 assets 文件夹，其中包含一个名为“CSS”的 css 文件夹、一个名为“images”的图像文件夹和一个名为“webfonts”的字体文件夹。以下是路径：

/laravel-master/public/assets/CSS

/laravel-master/public/assets/images

/laravel-master/public/assets/webfonts

在 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;
}

我也试过了：

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

和：

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

在我看来，我用 div 来调用这个 CSS：

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

这两种情况都会导致页面保持空白。图像没有显示，我不知道为什么。

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

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

和：

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

和：

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

所有这些都会导致图像符号损坏。图像未显示。

最后，再次在 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

  }

我使用的视图是一个刀片文件 (landing.blade.php)。这一切都在本地主机上，使用 MAMP。

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

【问题讨论】：

标签： css laravel laravel-4

【解决方案1】：

我停止了你的第一个问题，首先尝试了解决方案。

不应该是这样吗：

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

查看已删除的“/assets”

因为如果我搞定了，你的树状是这样的：

资产
- CSS
  - style.css
- 图片
  - 8662834823_575a23516d_o.jpg

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

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

因为我相信资产是你服务器的根目录。

【讨论】：

这成功了！惊人的。你有什么可以为其他人添加的解决方案吗？？
不要将此标记为答案，我对 laravel 或自定义字体导入一无所知。

【解决方案2】：

在 main.blade.php 中添加字体：

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

你也可以写：

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

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

body{
  font-family: Roboto;
}

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

那么在公开您的应用时您就不会遇到问题

【讨论】：