VueJS中的Rails Active Storage博客路徑

Question

我正在使用AWS S3的Rails 5.2應用程序中使用Active Storage托管圖像。 我可以在HTML視圖中使用<%= image_tag @gin.pic %> 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之后，哪里可以獲取參數？ 這不會出現在active_storage_blobs表的key中。

Answer 1

/rails/active_storage/blobs/和您發布的URL中的文件名之間的段是帶簽名的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。