ruby-on-rails - VueJS 中 Rails 主动存储博客的路径

Question

我在使用 AWS S3 托管图像的 Rails 5.2 应用程序中使用 Active Storage。我可以<%= image_tag @gin.pic %>在 HTML 视图中使用 ok，但我使用的是从 Rails API 驱动的单独的 VueJS 前端应用程序，我在文件路径上苦苦挣扎，只是得到了 404 的负载。

我最初尝试<img v-bind:src="gin.pic" alt="" />没有运气，所以也尝试了以下替代方案：

组件/Gins.vue

...
<img v-bind:src="'http://localhost:3000/gins/' + gin.pic_file_name" alt="" />
...

和

... 
<img v-bind:src="'http://localhost:3000/rails/active_storage/blobs/' + 
gin.pic_file_name" alt="" /> 
...

以上都不起作用。

我查看了 HTML 应用程序的源代码，它给出的 URL 为：

http://localhost:3000/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBDdz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--cea3da3ea500428a5f9827bb6bfd490ace800a8c/bathtub.jpg

这当然会重定向到 S3 中的 URL。

但是我在哪里得到参数blobs呢？表中的值并未显示此key值active_storage_blobs。

Answer 1

您发布的 URL 中的段/rails/active_storage/blobs/和文件名是签名的 Blob ID。以下是在 Ruby 中获取它的方法：

@gin.pic.signed_id

我不熟悉 Vue，所以我不知道你会如何将这个价值暴露给你的 Vue 应用程序。希望这足以帮助你。

如果可能的话，我建议从 Rails 应用程序的 API 响应中返回完整的下载 URL，而不是从不同的数据在 Vue 应用程序中组装它。具体如何执行取决于您如何呈现 API 响应，但关键是使用url_for或rails_blob_url生成 URL：

url_for(@gin.pic)
rails_blob_url(@gin.pic)

url_for并且rails_blob_url在上面的例子中是等价的。给定相同的附加文件，它们会生成相同的 URL。