rails asset pipeline images and css not displaying

Question

I am new to rails and am following the examples in Michael Hartl. I am having an issue in chapter 5 (https://www.railstutorial.org/book/filling_in_the_layout). I have followed the michaels instructions but I am not seeing images and my css is not displaying. I am using ruby Rails 5.0.1 with ruby 2.3.3p222 (2016-11-21 revision 56859) [i386-mingw32]

I added michaels html/code to my 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"/> 

I copied the rails.png image into app/assets/images/ directory but when I run the application the image is not displayed only the alt tag is displayed.

I also added bootstrap as per the instructions and it isnt working either.

gemfile extract source 'https://rubygems.org'

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

---

I ran bundle install and can see it is installed using a bundle show $ bundle show Gems included by the bundle: * 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) * builder (3.2.3) * bundler (1.13.7) * coderay (1.1.1) * coffee-rails (4.2.1) * coffee-script (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) * guard (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) * listen (3.0.8) * loofah (2.0.3) * lumberjack (1.0.11) * mail (2.6.4) * method_source (0.8.2) * mime-types (3.1) * mime-types-data (3.2016.0521) * mini_portile2 (2.1.0) * minitest (5.10.1) * minitest-reporters (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) * pry (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) * ruby-progressbar (1.8.1) * sass (3.4.23) * sass-rails (5.0.6) * shellany (0.0.1) * slop (3.6.0) * spring (1.7.2) * spring-watcher-listen (2.0.0) * sprockets (3.7.1) * sprockets-rails (3.2.0) * sqlite3 (1.3.12) * thor (0.19.4) * thread_safe (0.3.5) * tilt (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)

---

I added a custom.scss file to app\assets\stylesheets

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

---

Is this a problem with the assets pipeline since neither the css or images are displaying. I have tried putting the image in the public directory, the public/images directory, the app/assets directory but it isn't display in any of these. I have tried using a different image incase the image is corrupted I have tried using creating a new project

Any help would be greatly appreciated.

---

Thank your for coming back to me. Some extra information as requested:

I don't have an application.scss file, just an application.css file with the following content:

/* * 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 */ 

The html generated is as follows:

<!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> 

Accessing localhost:3000/assets/rails.png in a browser gives the following error.

No route matches [GET] "/assets/rails.png" Rails.root: c:/rails/static_app

Answer 1

Assuming your action that generates the following views has a controller calling the layout app/views/layouts/application.html.erb as shown on chapter 5, then you need to require your custom.scss on your application.scss

your controller

class ApplicationController < ActionController::Base layout 'application' def index end end 

your application.scss

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

The index action is just an example, if you named your view home.html.erb I can imagine you are pointing to a home action inside your controller