如何使用 Rails Active Storage 在视图中显示临时文件图像

Question

在我的 rails 6 应用程序中，我使用主动存储将文件上传到 cloudinary。我有一个功能，我想在提交之前预览表单。这还要求我在提交之前预览仍然是临时文件的上传图像。 我正在 create.html.erb 中设置预览。这就是我尝试在 create.html.erb 中预览图像临时文件的方式，但它不起作用。

    <%= image_tag params[:company][:logo].path %>

这就是我的公司模式的样子

class Company < ApplicationRecord
  belongs_to :user
  has_one_attached :logo
end

如何在我的视图中显示临时图像？

Answer 1

我想如果你还没有提交表格，它还没有上传。

在这种情况下，您可以显示仍在浏览器中的图像。

应该是这样的：

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    
    reader.onload = function(e) {
      $('#blah').attr('src', e.target.result);
    }
    
    reader.readAsDataURL(input.files[0]); // convert to base64 string
  }
}

$("#imgInp").change(function() {
  readURL(this);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form runat="server">
  <input type='file' id="imgInp" />
  <img id="blah" src="#" alt="your image" />
</form>

查看此问题以了解更多详情：Preview an image before it is uploaded。