2017-02-24 117 views
0

我是新來的鐵軌和我遵循邁克爾哈特爾的例子。我在第5章有一個問題(https://www.railstutorial.org/book/filling_in_the_layout)。我遵循michaels指令,但我沒有看到圖像,我的css不顯示。 我使用紅寶石的Rails 5.0.1與紅寶石2.3.3p222(2016年11月21日修訂56859)I386-的mingw32]導軌資產管道圖像和css不顯示

我加入邁克爾HTML /代碼到我的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中提取 源 'https://rubygems.org'

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

我跑捆綁安裝,並可以使用捆綁秀 $包展由束包括 寶石看到它被安裝: * actioncable( (5.0.1) * actionmailer(5.0.1) * actionpack(5.0.1) * actionview(5.0.1) * activejob(5.0.1) * activemo德爾(5.0.1) * ActiveRecord的(5.0.1) *的ActiveSupport(5.0.1) * ANSI(1.5.0) * AREL(7.1.4) * autoprefixer護欄(6.7.5) * bootstrap-sass(3.3.6) * builder(3.2.3) * bundler(1.13.7) * coderay(1.1.1) * coffee-rails(4.2.1) * coffee-script(2.4。 1) *咖啡腳本源(1.12.2) *併發紅寶石(1.0.4) * debug_inspector(0.0.2) * erubis(2.7.0) * execjs(2.7.0) * ffi(1.9.17) * formatador(0.2.5)(1.2.4) * guard-minitest(2.4.4) * i18n(0.8.0) * jbuilder(2.4。 1) * jQuery的導軌(4.1.1) *聽(3.0.8) *絲瓜(2.0.3) *樵夫(1.0.11) *郵件(2.6.4) * method_source(0.8。 2) * MIME類型(3.1) * MIME類型數據(3.2016.0521) * mini_portile2(2.1.0) * MINITEST(5.10.1) * MINITEST-記者(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) * rack(2.0.1) * rack-test(0.6.3) * rails(5.0.1) * rails-controller-testing(0.1.1) * rails-dom-testing(2.0.2) * rails-html-sanitizer(1.0.3) * railties(5.0.1) * rake(12.0.0) * rb-fsevent(0.9。8) * RB-inotify的(0.9.8) *紅寶石進度(1.8.1) * SASS(3.4.23) * SASS-導軌(5.0.6) * shellany(0.0.1) * (3.6.0) * spring(1.7.2) * spring-watcher-listen(2.0.0) *鏈輪(3.7.1) *鏈輪導軌(3.2.0) * sqlite3(1.3。 12) *托爾(0.19.4) * thread_safe(0.3.5) *傾斜(2.0.6) * turbolinks(5.0.1) * turbolinks源(5.0.0) * tzinfo(1.2。 2) * tzinfo-data(1.2016.10) * uglifier (3.0.0) * Web的控制檯(3.1.1) * WebSocket的驅動程序(0.6.5) *的WebSocket的擴展(0.1.2)


我添加了一個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或圖像顯示資產管道問題。 我試圖將圖像放在公共目錄,公共/圖像目錄,應用程序/資產目錄,但它不顯示在任何這些。 我已經嘗試使用不同的圖像incase圖像已損壞 我曾嘗試使用創建一個新項目

任何幫助將不勝感激。


謝謝你回來給我。根據要求一些額外的信息:

我沒有一個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] 「/assets/rails.png」 Rails.root:C:/軌道/ static_app

+0

裏面什麼的圖像生成的HTML?你有沒有改變在development.rb或application.rb中的任何東西? – Iceman

+0

你可以在你的文章中加入'app/assets/stylesheets/application.scss'嗎? –

+0

此外,把你的圖像內'應用程序/資產/圖像',並嘗試在您的瀏覽器'http:// localhost:3000/assets/rails.png'訪問此網址 –

回答

-1

假設你的動作產生以下視圖具有控制器調用佈局app/views/layouts/application.html.erb如圖所示第5章,那麼你需要要求您提供application.scss

控制器

class ApplicationController < ActionController::Base 
    layout 'application' 

    def index 
    end 

end 

您application.scss

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

index操作僅僅是一個例子,如果你命名你的看法home.html.erb我能想象你正在指向一個home動作控制器