trying to have png image show up in my Ruby app

Question

I'm trying to get an image to show up, but it's just not working. Mind you, this is my very first Ruby app (self-programmed product) and I cloned the Repo, so my apologies in advance if I'm not providing all the required information from the get-go or missing a rather simple oversight.

Here is my screenshot of my image not displaying:

I created the graphic in Illustrator and exported it was a png. I then added it to the right project folder. The image is called AIQtshirt.png and here's the code snippet:

 {
  'count' => 15,
  'html' => 'AutonomIQ<br>T-shirt',
  'class' => 'three',
  'image' => ActionController::Base.helpers.asset_path(
    'refer/AIQtshirt.png') 
  }

In fact, when I use the image that was there there before (from the Repo I cloned), it works. This image is called truman.png and it's in the same folder that I put the AIQtshirt.png file:

Here's the code snippet from using the initial placeholder that was in the repo when I cloned it:

{
  'count' => 15,
  'html' => 'AutonomIQ<br>T-shirt',
  'class' => 'three',
  'image' => ActionController::Base.helpers.asset_path(
    'refer/truman.png')
}

If it's easier to look at the repo it can be referenced here. https://github.com/harrystech/prelaunchr

I can imagine there's something I'm forgetting to do in another folder of the repo.

Here's the string I got when I edited the repo with the code provided in the comments:

Thanks in advance for your help!

Update: Here is the code:

<% stops.each do |stop| %>
    <li class="product brandon <% if stop["selected"] %>selected<% end %> <% if stop["class"] == 'five' %>last<% end %>">
      <div class="circle"><%= stop["count"] %></div>
      <div class="sep"></div>
      <p><%= stop["html"].html_safe %></p>

      <div class="tooltip">
         <img src="<%= stop["image"] %>" height="254">
      </div>

Answer 1

How to debug

A way to debug this would be to edit your app/views/users/refer.html.erb to show the image url visibly on your page. You should find this piece (assuming it relates to image you are not able to see):

<div class="tooltip">
  <img src="<%= stop["image"] %>" height="254">
</div>

and replace it with something like this:

<div class="tooltip">
  My img url as seen by rails is: <%= stop["image"] %> 
  <br/> Hm, is this where my image is? Have I made a typo? :)
  <img src="<%= stop["image"] %>" height="254">
</div>

What worked

Since I didn't want to let this hanging unanswered I went and cloned pre-launcher app myself and was able to make the image display. So, I'll assume you're running your dev server using foreman start -f Procfile.dev and that everything from README file of the pre-launcher repository went well for you (e.g. rake db:create, rake db:migrate)

So, here is what I did. I took some random shaver photo from the internet and named it fancy-shaver.png and saved it in: app/assets/images/refer folder.

Then I edited app/models/user.rb (just the first referal step) and put this:

 REFERRAL_STEPS = [
    {
      'count' => 5,
      'html' => 'Fancy shaver',
      'class' => 'two',
      'image' =>  ActionController::Base.helpers.asset_path(
        'refer/fancy-shaver.png') # <- this is what I changed
    },
    {
      'count' => 10,
      'html' => 'Truman Handle<br>w/ Blade',
      'class' => 'three',
      'image' => ActionController::Base.helpers.asset_path(
        'refer/[email protected]')
    },
    # ... the rest I didn't touch

Then I opened, http://localhost:5000/refer-a-friend and same as you I experienced the image was missing. Then I just did: CTRL+C where my server was running and started it again. The image was visible after that. And below is what I got:

If it doesn't work still

Advice: when things go south, especially when learning something new, sometimes the best thing to do is to restart everything (clone app in a new folder) and do exactly the steps that worked (e.g. you can try what I did above after following the app readme).