html - 仅当数据库中存在图像时如何设置div的动态背景图像

Question

我正在尝试通过 index.html.erb 为多个 div 设置动态背景图像，并通过内联样式以及从我的数据库中提取的背景 URL(使用 carrierwave)实现了这一点。现在看起来像这样:

 <div class="style-box col-8 ml-auto mr-auto" style="background: url(<%= place.photos.first.picture.url %>)">
      <h1><%= link_to place.name, place_path(place) %></h1>
      <i><%= place.address %></i>
      <br /><br />
      <p><%= place.description %></p>

我遇到的问题是，当创建新地点时，如果新地点的图像不存在(创建后不会立即出现)，则 View 无法创建完整的 html数据不完整的页面(即 place.photos 为 nil)。有没有办法，使用这种方法或类似的方法，使背景图像仅在存在新位置的图像时才覆盖默认样式框背景？通常我会使用 if 语句，但想不出一种方法来使 if 语句使用 rails 更新 CSS。

Answer 1

如果你想让一切都保持内联，你可以这样做:

<div class="style-box col-8 ml-auto mr-auto"
    style="background: url(<%= place.photos.first&.picture.url || "/images/default.jpg" %>)">
    <h1><%= link_to place.name, place_path(place) %></h1>
    <i><%= place.address %></i>
    <br /><br />
    <p><%= place.description %></p>
</div>

这是使用 or 运算符 (||)，如果存在则让第一个值通过，或者第二个值作为默认值。此外，如果没有照片，& 将防止页面出现错误。这与写法本质上是一样的:

style="background: url(
    <% if place.photos.first&.picture&.url %>
        <%= place.photos.first&.picture&.url %>
    <% else %>
        /images/default.jpg
    <% end %>
)">

你也可以把它移到一个辅助方法中让你清理东西，比如:

# in one of the app/helpers modules
def picture_url_or_default(place, default_url = '/images/default.jpg')
    return default_url if place.photos.empty
    return default_url if place.photos.first.picture.nil?
    return default_url if place.photos.first.picture.url.nil?

    place.photos.first.picture.url
end

# in the view
<div class="style-box col-8 ml-auto mr-auto"
    style="background: url(<%= picture_url_or_default(place))">

    ...