在我提交表单（carrierwave 和 cocoon）之前，图像的缩略图不会显示

Question

这是_image_fields.html.erb中的代码

<div class="nested-fields">

  <div class="image-fields">    <%= image_tag f.object.image_url(:thumb) if f.object.image_url.present? %>
    <%= f.file_field :image %>
    <%= f.hidden_field :image_cache %>   </div>   <div class="add-language-spacing">   <%= link_to_remove_association 'Remove Image', f, id: 'remove_photo' %> </div>

这是我在 _profile_form.html.erb 中呈现部分的地方

<p id="tag">Add Some Photos!</p>
<div>
  <%= f.fields_for :images do |image| %>
    <%= render "image_fields", f: image %>
  <% end %>
</div>

最后，在 profile/edit.html.erb 中

<div class="profile-form">
  <h1 class="page-title">Update Profile</h1>
  <%= render 'profile_form' %>
</div>

我的上传器是这样的

  # Create different versions of your uploaded files:
  process resize_to_fit: [300,300]
  version :thumb do
    process resize_to_fill: [200,200]

  end

拇指版本仅在我按下更新配置文件然后刷新页面后才会显示。无论出于何种原因，当我按下选择文件时，它都不会显示缩略图版本。

Answer 1

这是 Web 开发刚开始时令人困惑的部分：在客户端（浏览器）中执行什么以及在服务器上执行什么。

1) 您正在使用 cocoon 构建表单，这意味着表单内的所有数据只有在您提交表单后才会在服务器上处理。

2) 您正在使用carrierwave，它明确地仅适用于服务器上的ruby。

这意味着：只有在将表单提交到服务器后，您的上传者才会创建缩略图，因此只有在提交image_url 后才会定义。

你想要的是，一旦你选择了图片，它会在上传到服务器之前显示一个缩略图，这意味着你要么需要

• ajax 立即发布到服务器（并让它呈现缩略图）
• 一个 javascript 解决方案，它将读取文件的内容并显示（客户端，在浏览器中），然后将其发送到服务器

就我个人而言，我不认为 Cocoon 是适合这里工作的工具。我建议使用类似

• jquery-file-upload
• dropzonejs