试图在我的 Ruby 应用程序中显示 png 图像

Question

我正在尝试显示一张图片，但它不起作用。请注意，这是我的第一个 Ruby 应用程序（自编程产品）并且我克隆了 Repo，所以如果我没有从一开始就提供所有必需的信息或错过一个相当简单的疏忽，我提前道歉。

这是我的图片未显示的屏幕截图：

我在 Illustrator 中创建了图形并将其导出为 png。然后我将它添加到正确的项目文件夹中。图片名为 AIQtshirt.png，代码如下：sn-p：

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

事实上，当我使用之前存在的图像时（来自我克隆的 Repo），它可以工作。此图像称为 truman.png，它与我放置 AIQtshirt.png 文件的文件夹位于同一文件夹中：

这是我克隆它时使用存储库中初始占位符的代码 sn-p：

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

如果查看 repo 更容易，可以在此处引用。 https://github.com/harrystech/prelaunchr

我可以想象在 repo 的另一个文件夹中我忘记了做某事。

这是我使用 cmets 中提供的代码编辑 repo 时得到的字符串：

提前感谢您的帮助！

更新：这里是代码：

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

如何调试

调试此问题的一种方法是编辑您的app/views/users/refer.html.erb 以在您的页面上明显显示图像网址。你应该找到这件作品（假设它与你看不到的图像有关）：

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

并用这样的东西替换它：

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

什么有效

因为我不想让这个悬而未决的问题，我自己去克隆了pre-launcher 应用程序，并且能够使图像显示。 因此，我假设您正在使用 foreman start -f Procfile.dev 运行您的开发服务器，并且预启动器存储库的 README 文件中的所有内容对您来说都很顺利（例如 rake db:create、rake db:migrate）

所以，这就是我所做的。我从互联网上随机拍了一些剃须刀照片并将其命名为fancy-shaver.png 并将其保存在： app/assets/images/refer 文件夹。

然后我编辑app/models/user.rb（只是第一个推荐步骤）并输入：

 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/truman@2x.png')
    },
    # ... the rest I didn't touch

然后我打开，http://localhost:5000/refer-a-friend 和你一样，我经历了图像丢失。 然后我就这样做了：CTRL+C 我的服务器正在运行并再次启动它。 在那之后图像是可见的。以下是我得到的：

如果还是不行

建议：当事情不顺利时，尤其是在学习新事物时，有时最好的办法是重新启动所有内容（将应用程序克隆到新文件夹中）并执行有效的步骤（例如你可以在按照应用程序自述文件后尝试我上面所做的）。