如何使用 Rails Active Storage 在視圖中顯示臨時文件圖像

Question

在我的 rails 6 應用程序中，我使用主動存儲將文件上傳到 cloudinary。 我有一個功能，我想在提交之前預覽表單。 這還要求我在提交之前預覽仍然是臨時文件的上傳圖像。 我在 create.html.erb 中設置預覽。 這就是我嘗試在 create.html.erb 中預覽圖像臨時文件的方式，但它不起作用。

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

這就是我的公司 model 的樣子

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 upload 。