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

trying to have png image show up in my Ruby app

我正在尝试让图像显示出来,但它无法正常工作。请注意,这是我的第一个 Ruby 应用程序(自编程产品)并且我克隆了 Repo,所以如果我没有从一开始就提供所有必需的信息或缺少一个相当多的信息,我提前道歉简单的监督。

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

我在 Illustrator 中创建了图形并将其导出为 png。然后我将它添加到正确的项目文件夹中。该图像称为 AIQtshirt.png,这是代码片段:

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

事实上,当我使用之前存在的图像(来自我克隆的 Repo)时,它是有效的。此图像名为 truman.png,它与我放置 AIQtshirt.png 文件的文件夹相同:

这是使用我克隆时存储库中的初始占位符的代码片段:

{
  '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 时得到的字符串:

在此先感谢您的帮助!

更新:这是代码:

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

如何调试

调试此问题的一种方法是编辑您的 app/views/users/refer.html.erb 以在您的页面上明显地显示图像 url。你应该找到这篇文章(假设它与你看不到的图像有关):

<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 我的服务器是 运行 并再次启动它。 之后图像可见。下面是我得到的:

如果还是不行

建议:当事情变得糟糕时,尤其是在学习新东西时,有时最好的办法是重新启动一切(在新文件夹中克隆应用程序)并完全按照有效的步骤(例如,您可以在遵循应用自述文件后尝试我上面所做的)。