如何从rails本地项目文件夹显示图像?

时间:2016-08-21 23:32:15

标签: ruby-on-rails image twitter-bootstrap

非常基本的问题,但不知怎的,我无法让它发挥作用。我试图让一个图像位于项目的本地文件夹中,以显示在Rails上。另外,我正在使用bootstrap;因此我也需要声明class: "img-responsive"。以下是原始代码:<img class="img-responsive" src="assets/img/mockup/img2.jpg" alt="">

我咨询了this post,其中建议<%= image_tag("xyz.png", class: "img-responsive img-thumbnail img-circle") %>rubyonrails guide建议image_tag("/icons/icon.gif", class: "menu_icon")

我试过了

<%= image_tag ("assets/img/mockup/img2.jpg", class: "img-responsive")%>

<%= image_tag "assets/img/mockup/img2.jpg" %>

但它仍然无效。 我可以确认路径是:app/assets/img/mockup/img2.jpg

如何在rails应用视图中显示所述图像?

4 个答案:

答案 0 :(得分:2)

您有两种选择:

1)将您的img文件夹内容移至app/assets/images,然后引用图片,如:

<%= image_tag ("mockup/img2.jpg", class: "img-responsive")%>

2)将img文件夹添加到文件config/application.rb

中的Rails资产路径搜索中
config.assets.paths << Rails.root.join("app", "assets", "img")

这是因为在rails资产搜索路径中默认不包含app/assets/img/

有关详情,请查看http://guides.rubyonrails.org/asset_pipeline.html#asset-organization

答案 1 :(得分:2)

我正在浏览并看到this SO post。 我能够使用

使其工作
<%= image_tag ("/assets/mockup/img2.jpg"), class: "img-responsive"%>

图片路径为assets/images/mockup/img2.jpg;从图像路径images中省略assets/mockup/img2.jpg可以解决问题。

答案 2 :(得分:0)

只需添加到Iggy's answer

使用 Bootstrap 4 处理 Rails 6 应用程序时,我遇到了挑战。

不需要,无需将您的图像目录添加到config/initializers/assets.rb

中的Rails资产路径搜索中

我的图像路径app/assets/images/products/product-16.jpg

也就是说,图像被放置在products目录下的images目录中。

我是这样引用的

<%= image_tag ('/assets/products/product-16.jpg'), class: 'product-image__img' %>

如果您需要添加指向图像的链接,请按以下方式引用它:

<%= link_to image_tag('/assets/products/product-16.jpg'), 'http://#', target: '_blank', class: 'product-image__body' %>

这将导致以下结果:

<a href="images/products/product-16.jpg" data-width="700" data-height="700" class="product-image__body" target="_blank">
</a>

仅此而已。

我希望这会有所帮助

答案 3 :(得分:0)

试试这个:

把你的图片放在public文件夹里,我下面的图片路径是public/image_folder/img_name

<img src="<%= "/image_folder/img_name" %>">