ruby-on-rails Rails:为什么图像不显示在我的Rails基本应用程序中

8xiog9wr  于 2022-11-26  发布在  Ruby
关注(0)|答案(5)|浏览(249)

我的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更改为/assets/product1.jpg可以使其正常工作。

vulvrdjw

vulvrdjw1#

如果您收到一个扩展名为.jpeg的文件,请尝试用.jpg重命名该文件。
起始日期

<%= image_tag "image.jpeg" %>

收件人:

<%= image_tag "image.jpg" %>
uelo1irk

uelo1irk2#

如果您正在阅读《Agile Web Development With Rails》一书,那么html.erb代码就没有问题。唯一的问题是scss文件。请检查您是否将td.image display设置为none!将display更改为block,您将看到图像。

e0uiprwp

e0uiprwp3#

如果您正在使用资产管道http://guides.rubyonrails.org/asset_pipeline.html
图像路径应为/assets/product1.jpg,而不是/images/product1.jpg
如果未使用资产管道,请将images文件夹移动到public/images

vzgqcmou

vzgqcmou4#

我刚刚检查了你的应用程序,你的代码没有问题。唯一的问题是了解image_tag是如何工作的。
通常你把所有的图像、javscript和样式表放在app/assets目录中。当你在开发环境中工作时,这些文件是以未压缩的形式提供的,但是当你部署到生产环境中时,资产被预编译、缩小,结果文件存储在public/assets中。
缩小资产背后的想法,只是为了使客户端的请求更快,并保存带宽。
现在,在方法image_tag上,可以使用图像的外部路径、图像的本地路径或图像的相对路径。
当你这样做

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

它将使用图像标记的绝对url,并以

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

这与上一个场景的工作原理相同。
然而,在您的应用程序中,您将允许用户上传自己的图像,这将在您以后的书中进行,在真实的应用程序中,您将使用paperclipcarrierwave等gem

xfb7svmp

xfb7svmp5#

正如Srikanth已经说过的,assets路径应该被引用,作为一个例子,你可以把<%= image_tag 'rails.png' %>放在你的代码中,然后检查firebug(或者chrome中的inspect元素)来检查结果。
我不太确定为什么您的代码不能工作,因为我可以看到您使用了Rails进行Agile Web Development。我可以正常运行仓库应用程序。在您的表格中,我看到了“Product1”、“Product2”和“Product3”,这是您在image_url text_field中实际填写的内容吗?如果您将“Product1”更改为“product1.jpg”,会发生什么情况?
顺便说一句,如果你想使用曲别针,你的电话应该看起来像这样:

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

相关问题