Rails 4 image-path、image-url 和 assets-url 不再在 SCSS 文件中工作

Posted 2023-02-15

【中文标题】Rails 4 image-path、image-url 和 assets-url 不再在 SCSS 文件中工作

【英文标题】：Rails 4 image-path, image-url and asset-url no longer work in SCSS files

【发布时间】：2013-05-26 10:33:57

【问题描述】：

除了image-url 和 Rails 4 中的其他内容之外，我们是否应该使用其他内容？它们返回似乎没有意义的不同值。如果我在/app/assets/images/logo.png 中有logo.png 并且我执行以下操作，这就是我得到的：

image-url("logo.png") -> url("/images/logo.png") #obviously doesn't work
image-path("logo.png") -> "/images/logo.png"
asset-url("logo.png") -> url("/logo.png")

当然，这些都不起作用，因为它们前面至少需要/assets。

更新：实际上，我刚刚注意到，如何在 Rails 4 中访问图像？我在/app/assets/images/logo.png 有一张图片。但是，如果我访问以下任何一个 URL，我仍然看不到我的图像：

http://localhost:3000/assets/logo.png
http://localhost:3000/assets/images/logo.png
http://localhost:3000/logo.png
http://localhost:3000/images/logo.png

更新 2：我可以调出我的 logo.png 的唯一方法是将其移动到 /app/assets/stylesheets 目录然后拉起：

http://localhost:3000/assets/logo.png

【问题讨论】：

试试这个：asset_path("logo.png", image)

@depa - 只是转换为“/logo.png”，不会显示我的图像。

您是在.css 文件中还是在.css.scss 文件中使用该助手？

@depa - 不使用任何助手。我认为这是一个更大的资产问题，只是不适用于我的图像文件夹

@depa - 哦，我明白你在问什么。它在.css.scss 文件中

【参考方案1】：

我自己也遇到过这个问题。 希望有帮助的 3 点：

如果您将图像放在app/assets/images 目录中，那么您应该能够直接调用图像，路径中没有前缀。 IE。 image_url('logo.png') 根据您使用资产的位置，将取决于方法。如果您将它用作background-image: 属性，那么您的代码行应该是background-image: image-url('logo.png')。这适用于 less 和 sass 样式表。如果您在视图中内联使用它，那么您将需要使用 rails 中内置的 image_tag 帮助器来输出您的图像。再一次，没有前缀<%= image_tag 'logo.png' %> 最后，如果您正在预编译资产，请运行 rake assets:precompile 生成资产，或运行 rake assets:precompile RAILS_ENV=production 进行生产，否则，您的生产环境在加载页面时将没有指纹资产。

对于第 3 点中的那些命令，如果您正在运行 bundler，您还需要在它们前面加上 bundle exec。

【讨论】：

另外一点是阅读文档guides.rubyonrails.org/asset_pipeline.html。如果正在加载图像，您还可以在浏览器的 Web Developer Debug 中看到吗？

现在这就是你写答案的方式。每个场景。预测“假设”，没有松散的结局。一个“看过战斗”的人的标记（真的解决了这个问题）。

我被多次错过 RAILS_ENV=production 所困扰。

【参考方案2】：

您的第一个公式image_url('logo.png') 是正确的。如果找到图像，它将生成路径/assets/logo.png（加上生产中的哈希）。但是，如果 Rails 找不到您命名的图像，它将回退到 /images/logo.png。

下一个问题是：为什么 Rails 没有找到您的图像？如果你把它放在 app/assets/images/logo.png 中，那么你应该可以通过 http://localhost:3000/assets/logo.png 访问它。

如果可行，但您的 CSS 没有更新，您可能需要清除缓存。从你的项目目录中删除tmp/cache/assets并重启服务器（webrick等）。

如果失败，您也可以尝试仅使用 background-image: url(logo.png); 这将导致您的 CSS 查找具有相同相对路径（在本例中为 /assets）的文件。

【讨论】：

只是为了跳上这一点，我被图像路径上的双引号而不是单引号咬住了。您在 css/scss 文件中的资产帮助程序中经常使用单引号。

我得到“未定义的局部变量或方法 `image'”

你会不会不小心在图片前面放了一个空格？

【参考方案3】：

我刚刚发现，使用asset_url helper 可以解决这个问题。

asset_url("backgrounds/pattern.png", image)

【讨论】：

我收到undefined local variable or method 'image' 错误。

也许在 Rails 上发生了一些变化，这个答案已经过时了！你可以试试asset_path("<your_path>", type: :image)

【参考方案4】：

我遇到了类似的问题，尝试使用内联 css 添加背景图像。由于资产同步的工作方式，无需指定图像文件夹。

这对我有用：

background-image: url('/assets/image.jpg');

【讨论】：

谢谢，我在做assets/img.jpg 或../assets/img.jpg，这显然在任何目录中都不起作用。 /assets/img.jpg 确实如此。 TY

【参考方案5】：

Rails 4.0.0 看起来像使用 image-url 定义的图像，在与您的 css 文件相同的目录结构中。

例如，如果你的 css 在assets/stylesheets/main.css.scss，image-url('logo.png') 变成url(/assets/logo.png)。

如果您将 css 文件移动到 assets/stylesheets/cpanel/main.css.scss，image-url('logo.png') 将变为 /assets/cpanel/logo.png。

如果要直接使用assets/images目录下的image，可以使用asset-url('logo.png')

【参考方案6】：

对于样式表： url(asset_path('image.jpg'))

【讨论】：

url(asset_path('image.jpg')、url('image.jpg') 和image-url('image.jpg') 的主要区别是什么？我正在使用 Rails 5.0.0.1 和 url() 在 SCSS 文件和 中工作正常>html.erb 文件我使用asset_path() 所以我想知道正确的方法。提前致谢。

asset_path 向图像文件添加摘要附录。它实际上是用于生产的，每次部署后都会更改摘要附录，并且用户的浏览器将下载新版本的图像。

【参考方案7】：

如果有人来寻找如何从 rails 控制台

生成相对路径

ActionView::Helpers::AssetTagHelper
image_path('my_image.png')
=> "/images/my_image.png"

或控制器

include ActionView::Helpers::AssetTagHelper
image_path('my_image.png')
=> "/images/my_image.png"