【问题标题】:Rails: Why images are not showing in my rails basic appRails:为什么我的 Rails 基本应用程序中没有显示图像
【发布时间】:2013-04-05 07:01:44
【问题描述】:

我的index.html.erb 代码-

<h1>Listing products</h1>

<table border="1">

<% @products.each do |product| %>
  <tr>
    <td><%= product.title %></td>
    <td><%= product.description %></td>
    <td><%= image_tag(product.image_url, :class => 'list_image') %></td>
    <td><%= product.price %></td>
    <td><%= link_to 'Show', product %></td>
    <td><%= link_to 'Edit', edit_product_path(product) %></td>
    <td><%= link_to 'Destroy', product, method: :delete, data: { confirm: 'Are you sure?' } %></td>
  </tr>
<% end %>
</table>

<br />

<%= link_to 'New Product', new_product_path %>

图像在app\assets\images..但静止图像没有出现在前端。

当我Firebug 它时,我相信图像标签正在正确形成...让我知道我在这部分中缺少什么。

<img src="/images/product1.jpg" class="list_image" alt="Product1">

截图 -

图片也已经到位 -

让我知道我做错了什么以及如何解决它。

编辑

github.com/swapnesh/depot

让我知道为什么它在我的情况下不起作用。

虽然更改 /images/product1.jpg To /assets/product1.jpg 使其工作。

【问题讨论】:

  • 您使用的是回形针还是载波?
  • 您是否 100% 确定文件 /app/assets/images/product1.jpg 存在?我不确定,但文件可能不存在,然后助手使用路径 /images/product1.jpg 而不是 /assets/product1.jpg
  • 尝试在firebug中编辑src属性:&lt;img src="/images/product1.jpg" class="list_image" alt="Product1"&gt;&lt;img src="product1.jpg" class="list_image" alt="Product1"&gt;
  • @codeit 这个案例是 skrikant 提到的......虽然我正在寻找关于这种行为的一些详细答案
  • 我刚刚检查了代码,我添加了一个带有图像 url “product2.jpg”的产品,然后代码在 。如果你在创建产品的时候输入路径/images/product2.jpg,那么会使用相对路径,但是如果你只是输入product2.jpg,它会指向到正确的资产路径。不过,这不是将图像上传到产品的方法,请尝试检查 parperclip 之类的 gem,我建议阅读 agile web development with rails 一书。

标签: ruby-on-rails ruby ruby-on-rails-3 image


【解决方案1】:

如果您使用资产管道http://guides.rubyonrails.org/asset_pipeline.html

图片路径应该是/assets/product1.jpg而不是/images/product1.jpg

如果您不使用资产管道,请将图像文件夹移动到 public/images

【讨论】:

  • 没有。默认图片会在/assets/images/中搜索
  • @Srikanth Perfect ..当我更改“/images/product1.jpg” ---> “/assets/product1.jpg” ..您能否详细说明您的答案,因为我是新手到它(虽然我检查了你提到的网址..但简单的话将不胜感激)+1
  • @Swapnesh:您必须阅读资产管道文档才能理解这种行为。从 Rails 3.1 引入资产管道。它将图像、css、js 移动到资产目录中,并使路径在视图文件中更容易。在查看文件中,我们只调用 /assets/product.jpg、/assets/product.css,即使它组织在 /assets/images/product.jpg、/assets/stylesheets/product.css 中。这也可以在生产环境中压缩 JS、css、图像。
【解决方案2】:

我刚刚检查了您的应用程序,您的代码没有任何问题。唯一要做的就是了解 image_tag 的工作原理。

通常您将所有图片、javscript 和样式表放在 app/assets 目录中。当您在开发环境中工作时,这些文件是未压缩的,但当您部署到生产环境时,资产会被预编译、缩小,结果文件存储在 public/assets 中。

缩小资产背后的想法是让客户端的请求更快,并节省带宽。

现在,在方法 image_tag 上,您可以使用图像的外部路径、图像的本地路径或图像的相对路径。

当你这样做时

<%= image_tag "http://www.mywebsite.com/image.jpg" %>

它将使用图像标签的绝对网址,您将以

结尾
<img src="http://www.mywebsite.com/image.jpg" />

你也可以添加一个本地路径,比如

<%= image_tag "/images/image.jpg" %>

结束

<img src="/images/image.jpg" />

这实际上是您遇到的问题,因为 rails 在预编译文件时,会将所有内容放在 /public/assets 中,您可以通过转到路径访问这些文件 /assets 正如其他用户所解释的那样。

所以代码

<%= image_tag "/assets/image.jpg" %>

确实有效,因为你以

结尾
<img src="/assets/image.jpg" />

您可以做的另一件事是使用相对路径,即

<%= image_tag "image.jpg" %>

将转换为

<img src="/assets/image.jpg" />

这将与最后一个场景相同。

尽管如此,在您的应用程序中,您将让用户上传他们自己的图像,这将在您稍后在本​​书中进行时发生,在现实世界的应用程序中,您将使用像 paperclip 或 @ 这样的 gem 987654322@

【讨论】:

    【解决方案3】:

    正如 Srikanth 已经说过的,应该引用资产路径。例如,您可以将 &lt;%= image_tag 'rails.png' %&gt; 放入您的代码中并检查 firebug(或检查 chrome 中的元素)以检查结果。

    我不太确定您的代码为什么不起作用,因为我可以看到您使用 Rails 进行敏捷 Web 开发。我让仓库应用程序运行没有问题。在您的表格中,我看到您是“Product1”、“Product2”和“Product3”,这是您在 image_url text_field 中实际填写的内容吗?如果将“Product1”更改为“product1.jpg”会怎样?

    附带说明,如果您想使用 Paperclip,您的调用应如下所示:

    <%= image_tag(product.image.url, class: 'list_image') %>
    

    【讨论】:

      【解决方案4】:

      如果您收到带有 .jpeg 扩展名的文件,请尝试仅使用“.jpg”重命名该文件。

      来自

      <%= image_tag "image.jpeg" %>
      

      收件人:

      <%= image_tag "image.jpg" %>
      

      【讨论】:

        猜你喜欢
        • 2018-09-23
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2022-07-24
        相关资源
        最近更新 更多