CODEWITHSUNDEEP
ruby-on-railsruby-on-rails-3erb
Vignesh
Vignesh

Reputation: 259

Images do not load in Rails development Environment

I have the following line of code:

<img src="<%= image_url ("/slides/hotel.jpg") %>" style="opacity:0;" alt="slidebg1" data-bgfit="cover" data-bgposition="left bottom" data-bgrepeat="no-repeat">

Gemfile:

source https://rubygems.org
gem 'rails', '4.2.3'
gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.1.0'
gem 'pg', '~> 0.18.2'
gem 'coffee-script-source', '1.8.0'
gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder', '~> 2.0'
gem 'sdoc', '~> 0.4.0', group: :doc
gem 'simple_form'
gem 'headjs-rails'

group :development, :test do
  gem 'debugger'
  gem 'activerecord-postgresql-adapter'  gem 'web-console', '~> 2.0'
end

gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

Development.rb:

config.assets.debug = false
config.assets.compile = true
config.assets.enabled = true
config.serve_static_assets  = true

I am running in Windows 8 and I gave rake assets:precompile and it completed fine. But the image does not load. I am sure that image exists under that specified directory. In my case, the image exists under assets/images/slides/hotel.jpg. I had tried giving the file path as /assets/images/slides/hotel.jpg, /images/slides/hotel.jpg and /slides/hotel.jpg and all 3 does not work.

Error:

Started GET "/slides/hotel.jpg" for ::1 at 2015-07-28 21:03:04 +0530
ActionController::RoutingError (No route matches [GET] "/slides/hotel.jpg")

Upvotes: 2

Views: 1150

Answers (4)

Benjamin Bouchet
Benjamin Bouchet

Reputation: 13181

In your case, the image exists under assets/images/slides/hotel.jpg, so the path returned by image_url must be /images/slides/hotel.jpg (More info about assets paths in the guide)

Solution: 

<img src="<%= image_url('slides/hotel.jpg') %>" style="opacity:0;" alt="slidebg1" data-bgfit="cover" data-bgposition="left bottom" data-bgrepeat="no-repeat">
#                        ^---- Just remove the "/" here

How I found-out:

Little bonus, to help you find-out, next time you run in a similar case

From your rails app directory, in a terminal, start rails c

# Include the helper whom define image_url
irb(main):001:0> include ActionView::Helpers::AssetUrlHelper
=> Object

# Test the output of your actual code
irb(main):002:0> image_url "/slides/hotel.jpg"
=> "/slides/hotel.jpg"
# As you can see the path is incorrect because it does not start with '/images'

# Test the output after removing the heading slash
irb(main):003:0> image_url "slides/hotel.jpg"
=> "/images/slides/hotel.jpg"
# Correct output as the path starts with '/images'

Upvotes: 2

Akshay Borade
Akshay Borade

Reputation: 2472

Try this

In application.rb, add the below lines:

config.assets.enabled = true

If slides directory is in assets directory then 

config.assets.paths << Rails.root.join("app", "assets", "slides")

and if slides directory is in assets/images directory then

config.assets.paths << Rails.root.join("app", "assets", "images", "slides")

and then try to load image

<%= assets_path "/slides/hotel.jpg", style:"opacity:0;", alt:"slidebg1", 'data-bgfit'=>"cover", 'data-bgposition'=>"left bottom" 'data-bgrepeat'=>"no-repeat"%>

Hope this will work for you.

Upvotes: 1

ajain
ajain

Reputation: 75

I'd try two other variations:

(1) image_url ("slides/hotel.jpg") (I can't imagine it's this basic and that image_url is adding a the extra slash...)

and

(2) asset_url ("hotel.jpg")

Upvotes: 1

Nermin
Nermin

Reputation: 6100

Why dont you use image_path

For example

<%= image_path "/slides/hotel.jpg", style:"opacity:0;", alt:"slidebg1", 'data-bgfit'=>"cover", 'data-bgposition'=>"left bottom" 'data-bgrepeat'=>"no-repeat"%>

Upvotes: 1

Related Questions