[Vuejs]-Path for Rails Active Storage Blog in VueJS

by

0👍

The segment between /rails/active_storage/blobs/ and the filename in the URL you posted is a signed blob ID. Here’s how to obtain it in Ruby:

@gin.pic.signed_id

I’m not familiar with Vue, so I don’t know how you’d expose that value to your Vue app. Hopefully that’s enough to help you.

If it’s possible, I’d recommend returning the full download URL in the API response from the Rails app rather than assembling it in your Vue app from disparate data. Exactly how you’d do that depends on how you’re rendering API responses, but the key bit is using url_for or rails_blob_url to generate the URL:

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

url_for and rails_blob_url are equivalent in the example above. Given the same attached file, they generate the same URL.

👤George Claghorn

Leave a comment