【问题标题】:CSS images not displaying with AngularJS on Heroku在 Heroku 上不使用 AngularJS 显示 CSS 图像
【发布时间】:2015-07-04 00:45:11
【问题描述】:

我正在使用 Heroku - Yeoman - AngularJS Full-Stack - Bootstrap - NodeJS Stack。

Heroku 上的部署是使用“Grunt build”命令构建的。部署到 Heroku 时,我在网页上呈现 CSS 图像时遇到问题。页面中的所有图像都会显示,但不是来自 CSS 文件。

例如:下面的代码不起作用

CSS

.aboutpage-header
{
    height: 250px;
    background: url('../images/slider-map.jpg') center center no-repeat scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    padding-top: 50px;
}

HTML:

<header class="aboutpage-header">
  <div class="container text-center">
    <div class="row">
      <div class="col-lg-12">
        <h2 class="title">About Us</h2>
        <h2 class="intro"><i class="fa fa-location-arrow"></i>Company<span class="highlight">IT</span>
          are experts in bespoke software development and tailored consulting</h2>
      </div>
    </div>
  </div>
</header>

在本地运行 Grunt serve 时它可以正常工作,但一旦部署到 Heroku 上,CSS 图像就会丢失。

【问题讨论】:

  • 现在为 Heroku 开发时已排序,只需使用 /assets/images/aboutus.jpg 而不是 ../assets/images/aboutus.jpg
  • 你应该发表你的评论作为答案。

标签: node.js heroku gruntjs yeoman angular-fullstack


【解决方案1】:

根据 cmets 的建议,链接应为:

/assets/images/image.jpg

代替:

../assets/images/image.jpg

【讨论】:

    猜你喜欢
    • 2021-03-30
    • 1970-01-01
    • 1970-01-01
    • 2016-09-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-08-24
    相关资源
    最近更新 更多