【问题标题】:<img src=""> Isn't accepting image path<img src=""> 不接受图片路径
【发布时间】:2015-04-06 21:09:15
【问题描述】:

我的app/assets/images/ 文件夹中有一张名为“Flower.jpg”的图片。 &lt;%=image_tag("Flower.jpg")%&gt; 可以显示它,但我想用 html 显示它。 &lt;img src="Flower.jpg"&gt; 什么都不做。

对于我的模型用户,我也在使用 Paperclip,它将图像存储在 public/system/users/avatars/000/000 中,User.avatar_file_name 返回绝对文件路径,在本例中为:/system/users/avatars/000/000/157/thumb/Flower.jpg?1248273956。像这样将此路径插入到 src 中:&lt;img src="&lt;%=@user.avatar_file_name%&gt;"&gt; 用于显示图像。

我在 Rails 控制台中找到了 Flower.jpg 的绝对路径:

> helper.image_tag("Flower.jpg")
=> "<img alt=\"Flower\" src=\"/assets/Flower.jpg\" />

然后&lt;img src="/assets/Flower.jpg\"&gt; 不显示,即使&lt;img src="/system/users/avatars/000/000/157/thumb/Flower.jpg?1248273956"&gt; 显示。这是为什么呢?

【问题讨论】:

  • 为什么扩展名后面有一个“\”?
  • @Kritner 我不知道。这正是 rails 控制台给我的输出。

标签: html ruby-on-rails ruby-on-rails-4 path paperclip


【解决方案1】:

image_tag 助手将标准图像文件夹的路径添加到文件的路径中。在我的 rails 版本中,这是“/images/”,所以这个

<%=image_tag("Flower.jpg")%>

呈现为

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

与所有像这样的资源路径一样,实际文件应该是相对于您的应用程序的公共文件夹,即

<RAILS ROOT>/public/images/Flower.jpg

在您的 rails 版本中,默认路径似乎是 /app/assets/images/,所以这个

<%=image_tag("Flower.jpg")%>

呈现为

<img src="/app/assets/images/Flower.jpg">

指向这个文件:

<RAILS ROOT>/public/app/assets/images/Flower.jpg

如果你这样做了

<img src="Flower.jpg">

它会期望文件在&lt;RAILS ROOT&gt;/public/Flower.jpg,显然它不在那里,所以img标签不起作用。如果你想自己写出来,不使用助手,然后给出&lt;RAILS ROOT/public文件夹中文件的路径,即

<img src="/app/assets/images/Flower.jpg">

顺便说一句,在你的 html 的 sn-p 中你放了 scr=" 而不是 src=" 这会更破坏它。

【讨论】:

  • &lt;img src="/app/assets/images/Flower.jpg"&gt; 也不做任何事情。我不认为它应该指向&lt;RAILS ROOT&gt;/public/app/assets/images/Flower.jpg。我确实有一个public 文件夹,但它与我的app 文件夹是分开的。 app 似乎在根目录下。
  • 实际文件在哪里,相对于您的 RAILS_ROOT 文件夹?
  • 它需要在您的RAILS_ROOT/public 文件夹中的某个位置,但请记住,当您预部署Rails 时,可能会将文件从RAILS_ROOT/app/assets 复制到RAILS_ROOT/public
  • 获得图像的路径是:RAILS_ROOT =&gt; app =&gt; assets =&gt; images =&gt; Flower.jpg.
  • 那是你的问题。您的网站只能链接到公共文件夹中的资源:您无法访问网页上 RAILS_ROOT/app 中的文件。就像我说的,当您进行资产预编译时,rails 会将这些从应用程序/资产复制到公共位置,您需要链接到公共位置。
猜你喜欢
  • 2018-03-31
  • 2021-02-12
  • 1970-01-01
  • 2016-04-30
  • 2021-04-27
  • 2015-10-08
  • 1970-01-01
  • 2014-06-23
  • 1970-01-01
相关资源
最近更新 更多