Question

我是rails的新手，并且正在关注Michael Hartl的例子。我在第5章（https://www.railstutorial.org/book/filling_in_the_layout）中遇到了问题。我已经按照michaels说明但我没有看到图像，我的CSS没有显示。我使用ruby Rails 5.0.1和ruby 2.3.3p222（2016-11-21修订版56859）[i386-mingw32]

我将michaels html / code添加到我的home.html.erb

<% provide(:title, "Home") %>
<div class="center jumbotron">
  <h1>Welcome to the Sample App</h1>

  <h2>
    This is the home page for the
    <a href="http://www.railstutorial.org/">Ruby on Rails Tutorial</a>
    sample application.
  </h2>

  <%= link_to "Sign up now!", '#', class: "btn btn-lg btn-primary" %>
</div>

<%= link_to image_tag("rails.png", alt: "Rails logo"),
            'http://rubyonrails.org/' %>


<br/><br/>  

<%= link_to image_tag("bunratty.png", alt: "Bunratty"),
            'http://rubyonrails.org/' %>
<%= link_to image_tag("kitten.png", alt: "Kitten"),
            'http://rubyonrails.org/' %>
<%= image_tag image_url('rails.png') %>
<%= image_tag image_path('rails.png') %>
Display using html
<img src="/public/rails.png" alt="rails logo"/>

我将rails.png图像复制到app / assets / images /目录中，但是当我运行应用程序时，图像不显示，只显示alt标记。

我还根据说明添加了bootstrap，它也没有工作。

gemfile提取来源＆＃39; https://rubygems.org＆＃39;

gem 'rails',        '5.0.1'
gem 'bootstrap-sass', '3.3.6'

我运行了bundle install，可以看到它是使用bundle show安装的 $ bundle show 捆绑包含的宝石： * actioncable（5.0.1） * actionmailer（5.0.1） * actionpack（5.0.1） * actionview（5.0.1） * activejob（5.0.1） * activemodel（5.0.1） * activerecord（5.0.1） * activesupport（5.0.1） * ansi（1.5.0） * arel（7.1.4） * autoprefixer-rails（6.7.5） * bootstrap-sass（3.3.6） *建造者（3.2.3） * bundler（1.13.7） * coderay（1.1.1） * coffee-rails（4.2.1） *咖啡脚本（2.4.1） * coffee-script-source（1.12.2） * concurrent-ruby（1.0.4） * debug_inspector（0.0.2） * erubis（2.7.0） * execjs（2.7.0） * ffi（1.9.17） * formatador（0.2.5） * globalid（0.3.7） *后卫（2.13.0） * guard-compat（1.2.1） * guard-minitest（2.4.4） * i18n（0.8.0） * jbuilder（2.4.1） * jquery-rails（4.1.1） *听（3.0.8） *丝瓜络（2.0.3） *伐木工人（1.0.11） *邮件（2.6.4） * method_source（0.8.2） *哑剧型（3.1） * mime-types-data（3.2016.0521） * mini_portile2（2.1.0） * minitest（5.10.1） * minitest-reporter（1.1.9） * multi_json（1.12.1） * nenv（0.3.0） * nio4r（1.2.1） * nokogiri（1.7.0.1） * notiffany（0.1.1） * pg（0.18.4） *撬（0.10.4） * puma（3.4.0） *机架（2.0.1） *机架测试（0.6.3） * rails（5.0.1） *轨道控制器测试（0.1.1） * rails-dom-testing（2.0.2） * rails-html-sanitizer（1.0.3） *铁路（5.0.1） *耙（12.0.0） * rb-fsevent（0.9.8） * rb-inotify（0.9.8） * ruby-progressbar（1.8.1） * sass（3.4.23） * sass-rails（5.0.6） * shellany（0.0.1） * slop（3.6.0） *春天（1.7.2） * spring-watcher-listen（2.0.0） *链轮（3.7.1） * sprockets-rails（3.2.0） * sqlite3（1.3.12） *托尔（0.19.4） * thread_safe（0.3.5） *倾斜（2.0.6） * turbolinks（5.0.1） * turbolinks-source（5.0.0） * tzinfo（1.2.2） * tzinfo-data（1.2016.10） * uglifier（3.0.0） * web-console（3.1.1） * websocket-driver（0.6.5） * websocket-extensions（0.1.2）

我在app \ assets \ stylesheets

中添加了custom.scss文件

@import "bootstrap-sprockets";
@import "bootstrap";

/* universal */

body {
  padding-top: 60px;
  background-color:lime;
}

section {
  overflow: auto;
}

textarea {
  resize: vertical;
}

.center {
  text-align: center;
}

.center h1 {
  margin-bottom: 10px;
}

这是资产管道的问题，因为css或图像都没有显示。我已经尝试将图像放在公共目录，public / images目录，app / assets目录中，但它不会显示在任何这些目录中。我尝试使用不同的图像，因为图像已损坏我尝试过使用创建新项目

非常感谢任何帮助。

感谢您回复我。根据要求提供一些额外信息：

我没有application.scss文件，只是一个包含以下内容的application.css文件：

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

生成的html如下：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" media="all" href="/stylesheets/default.css" data-turbolinks-track="reload" />
    <script src="/javascripts/default.js" data-turbolinks-track="reload"></script>
    <title>Home | Ruby on Rails Tutorial</title>
    <meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="SogDGi5kvIl13JKu57VqH0phQ/1pSw+tKuVAmvTVuQITclDhVvKLJNwHJJzcOa0qUlOhJ8cmRsBx9rUCINA+TQ==" />
  </head>

  <body>

  <header class="navbar navbar-fixed-top navbar-inverse">
      <div class="container">
        <a id="logo" href="#">sample app</a>
        <nav>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="/">Home</a></li>
            <li><a href="/help">Help</a></li>
            <li><a href="/about">About Us</a></li>
          </ul>
        </nav>
      </div>
    </header>
    <div class="container">
  <div class="center jumbotron">
  <h1>Welcome to the Sample App</h1>

  <h2>
    This is the home page for the
    <a href="http://www.railstutorial.org/">Ruby on Rails Tutorial</a>
    sample application.
  </h2>

  <a class="btn btn-lg btn-primary" href="#">Sign up now!</a>
</div>

<a href="http://rubyonrails.org/"><img alt="Rails logo" src="/images/rails.png" /></a>


<br/><br/>  

<a href="http://rubyonrails.org/"><img alt="Bunratty" src="/images/bunratty.png" /></a>
<a href="http://rubyonrails.org/"><img alt="Kitten" src="/images/kitten.png" /></a>
<img src="http://localhost:3000/images/rails.png" alt="Rails" />
<img src="/images/rails.png" alt="Rails" />
Display using html
<img src="/public/rails.png" alt="rails logo"/>


<img src="/public/rails.png" alt="rails logo"/>

<img src="http://localhost:3000/public/rails.png" alt="rails logo"/>
<br/>
http://localhost:3000/images/rails.png

</div>  
  </body>
</html>

在浏览器中访问localhost：3000 / assets / rails.png会出现以下错误。

没有路线匹配[GET]＆＃34; /assets/rails.png" Rails.root：c：/ rails / static_app

Answer 1

假设您生成以下视图的操作有一个控制器调用布局app/views/layouts/application.html.erb，如第5章所示，那么您需要在application.scss上要求custom.scss

你的控制器

class ApplicationController < ActionController::Base
  layout 'application'

  def index
  end

end

你的application.scss

/*
  = require_self
*/
@import "custom.scss";

索引操作只是一个示例，如果您将视图命名为home.html.erb我可以想象您指向控制器内的home操作

rails资产管道图像和css不显示

1 个答案: