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

当你开始时，这是webdevelopment令人困惑的部分：客户端（浏览器）执行的内容以及服务器上执行的内容。

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

2）您正在使用的是carrierwave，它只能在服务器上的ruby中运行。

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

你想要的是，一旦你选择了图像，它就会显示一个缩略图，然后再上传到服务器，这意味着你需要

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

就我个人而言，我不相信茧是这里工作的正确工具。我建议使用像

这样的东西

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

1 个答案: