Ruby on Rails:在html.erb文件中以html显示图片

时间:2015-12-22 16:42:05

标签: html ruby-on-rails

我在Ruby on Rails-网站上需要一张可拖动的图片,一切正常,但图片没有显示。

这是图片及其属性的代码:

<img id="drag1" src="/images/img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

如果我这样写,图片会显示出来:

<%= image_tag("img_logo.gif") %>

我的问题:我需要在上面的代码中插入什么,所以我的图片(img_logo.gif)确实出现了?

图片本身位于:/app/assets/images/img_logo.gif

编写此代码的文件是html.erb文件。

我没有安装任何宝石,如paperclip或imagemagick。

编辑:感谢Meagar和Vic,这将有效:

要么:

<%= image_tag('img_logo.gif', draggable: "true", id: "drag1") %>

或者这个:

<img id="drag1" src="<%= asset_path('img_logo.gif') %>" draggable="true" ondragstart="drag(event)" width="336" height="69">

2 个答案:

答案 0 :(得分:4)

如果<img id="drag1" src="/images/img_logo.gif"有效,那么您的资产管道中的图片,它位于public/images

如果您的资产管道中的图片 位于app/assets/images/img_logo.gif,则其正确的网址为/assets/img_logo.gif

您拥有的代码,image_tag("img_logo.gif") 是正确的,因为它会输出正确的网址/assets/img_logo.gif,假设图片就在您说的位置,并且您没有' t更改了有关资产管道的任何设置。您已成功使用/images/img_logo.gif请求图片的事实告诉我情况并非如此,并且您没有准确描述您的情况。

关于你的评论:

  

感谢您的回答:当我在<img id="drag1" src="/assets/img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

输入内容时,它有效

不要那样做

我认为你向后传递正在发生的事情。我知道<img src="/images/img_logo.gif" 正在工作image_tag失败了。我现在看到image_tag一直在运行,但您正试图弄清楚如何向输出的id="drag1" draggable=true标记提供额外的属性(<img>等)。

您不能像这样硬编码资产路径。它可以在开发中使用,但资产URL 在生产中不同,您的网站将停止工作。

要实现您的目标,您可以将属性传递给image_tag助手,也可以在HTML代码中使用asset_path

要么......

<%= image_tag('img_logo.gif', draggable: "true", id: "drag1") %>

或者这......

<img id="drag1" src="<%= asset_path('img_logo.gif') %>" draggable="true" ondragstart="drag(event)" width="336" height="69">

但是不要使用此

<img id="drag1" src="/assets/img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

答案 1 :(得分:0)

使用<%= image_tag("img_logo.gif") %>并显示图片时,右键点击您网站上的图片,然后点击“检查元素”。您应该看到src与'/images/img_logo.gif'不同。它应该有一些胡言乱语。

如果是,原因在于rails如何处理其资产。查看this rails guide on fingerprint以获取有关实施此目的的基本原理的更详细说明。

如果不是,请分享它是什么。

最后,生产站点无法访问app/assets文件夹。它只能访问public文件夹中的文件和子目录。您可以尝试将gif文件放在/public/images/img_logo.gif中,它应该与您的第一个代码一起显示。