Question

我通过动态更改类的背景图像并使该类成为图像来拍摄每个帖子图像的一小条。问题是，在循环中每个帖子的背景图像是相同的（循环中的最后一个帖子）。如何让每个帖子显示正确的背景图像？

<% @posts.each do |post| %>

<style media="screen">
  .foobar { background-image: url(<%= post.image %>); }
</style>  

<div class="foobar"></div>


<% end %>

Answer 1

问题是您使用的是同一个类，其背景图片被以下标记覆盖。

解决方案：为每个帖子创建一个不同的类：

<% @posts.each do |post| %>
  <style media="screen">
    .foobar-post-<%= post.id %> { background-image: url(<%= post.image %>); }
  </style>  
  <div class="foobar-post-<%= post.id %>"></div>
<% end %>

Answer 2

你可以这样做：

<% @posts.each do |post| %>
  <div class="foobar" style="background-image: url(<%= post.image %>)"></div>
<% end %>

内联样式并不好，但内联样式标签更糟糕。您还应该查看image_path以引用图像文件。

动态更改循环中的背景图像

2 个答案: