Question

我在使用Laravel 4 Framework时遇到了一些问题。首先，为了进行设置，我在我的公共文件夹中有一个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）。这都在localhost上，使用MAMP。

非常感谢你对这一切的帮助。我是Laravel的新手，我已经在现场网站的框架之外完成了所有这些工作。非常感激您的帮忙。

Answer 1

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

不应该是这样的：

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

请参阅已删除的“/ assets”

因为如果我把它弄好了，你的树状就像这样：

资产
- CSS
  - 的style.css
- 图像
  - 8662834823_575a23516d_o.jpg

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

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

因为我认为资产是服务器的根源。

Answer 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

然后在公开您的应用时没有问题

Laravel 4 Framework中的CSS图像，图像和字体

2 个答案: