Rails ActiveStorage 存储的图片如何实现预览功能？

基础实现说明 #

你尝试的<%= image_tag(image) %>写法本身是正确可运行的，之前看不到图片是因为原始图片尺寸过大，超出了浏览器视口范围，需要向下滚动才能查看到。

优化显示效果的方案 #

如果要避免图片尺寸过大的问题，可选择以下两种常用方案：

• 前端直接限制显示尺寸
  直接给image_tag添加尺寸属性或者自定义CSS类控制渲染大小，不会修改原图：

  <% @post.images.each do |image| %>
    <!-- 直接指定宽高 -->
    <%= image_tag image, width: 200, height: 200 %>
    <!-- 或者添加CSS类自定义样式 -->
    <%= image_tag image, class: "post-image" %>
  <% end %>
  

  对应CSS示例：

  .post-image {
    max-width: 300px;
    max-height: 300px;
    object-fit: contain;
  }
  

• 服务端生成缩略图（推荐）
  如果你需要减少大图加载的带宽消耗，可使用ActiveStorage的变体功能生成指定尺寸的缩略图：
  1. 先在Gemfile中添加图片处理依赖，执行bundle install安装：

     gem "image_processing"
     

  2. 视图中调用variant方法生成缩略图：

     <% @post.images.each do |image| %>
       <%= image_tag image.variant(resize_to_limit: [300, 300]) %>
     <% end %>
     

额外说明 #

你安装的poppler gem是用于PDF、视频等非图片类型附件的预览功能，如果你只需要处理普通图片格式的展示，不需要用到该依赖，也不需要调用preview方法。

内容的提问来源于stack exchange，提问作者r3b00t