Путь для активного хранилища Rails Блог в VueJS

Question

Я использую Active Storage в приложении Rails 5.2, использующем AWS S3 для размещения образов. Я могу использовать <%= image_tag @gin.pic %> ok в представлении HTML, но я использую отдельное приложение VueJS, управляемое из Rails API, и я борюсь с путем к файлу и просто получаю нагрузку 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

Это, конечно, перенаправляет на URL в S3.

Но где я могу получить параметр после blobs? Это не отображается для значения key из таблицы active_storage_blobs.

Answer 1

Сегмент между /rails/active_storage/blobs/ и именем файла в размещенном вами URL-адресе является подписанным идентификатором BLOB-объекта. Вот как получить его в Ruby:

@gin.pic.signed_id

Я не знаком с Vue, поэтому я не знаю, как вы представили бы эту ценность своему приложению Vue. Надеюсь, этого достаточно, чтобы помочь вам.

Если это возможно, я бы рекомендовал возвращать полный URL-адрес загрузки в ответе API из приложения Rails, а не собирать его в приложении Vue из разрозненных данных. Как именно вы это сделаете, зависит от того, как вы отображаете ответы API, но ключевой бит использует url_for или rails_blob_url для генерации URL:

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

url_for и rails_blob_url эквивалентны в примере выше. Учитывая тот же прикрепленный файл, они генерируют один и тот же URL.