rails asset pipeline images and css not displaying - ruby-on-rails

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
Ruby on Rails Tutorial
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>Home</li>
<li>Help</li>
<li>About Us</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
Ruby on Rails Tutorial
sample application.
</h2>
<a class="btn btn-lg btn-primary" href="#">Sign up now!</a>
</div>
<img alt="Rails logo" src="/images/rails.png" />
<br/><br/>
<img alt="Bunratty" src="/images/bunratty.png" />
<img alt="Kitten" src="/images/kitten.png" />
<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