使用 vuejs2 和回形针获取图像 url

Question

我正在使用回形针、rails 和 vue。我的问题是如何使用 vuejs2

获取图像的 url

app.js

var posts = #{ sanitize @posts.to_json }
    var app = new Vue({
      el: '#app',
      data: {
        posts: posts
      }
    })

app.haml

#app
  %div{ 'v-for' => 'post in posts' }
    %img{ ':src' => 'post.avatar' }

post

{ "id": 7, "title": "first post", "description": "lorem", "avatar_file_name": "batman.jpg", "avatar_content_type": "image/jpeg", "avatar_file_size": 32823, "avatar_updated_at": "2018-04-23T04:19:06.527Z" }

Answer 1

您需要为您的 Post class 编写一个新的 .as_json 函数或 monkeypatch 来读取类似这样的内容：

def as_vue_json
  { id: id, 
    title: title, 
    avatar_url: avatar.url(:original),
    description: description }
end

使用 vuejs2 和回形针获取图像 url

get the image url with vuejs2 and paperclip

ruby-on-rails

vuejs2

paperclip