ruby-on-rails - 异步调用 Controller 操作以返回 URL 以与 image_tag 一起使用

Question

我目前有以下 View ，它正在加载一堆图像，一个数组中的每个字符一个。问题是 get_character_thumbnail 调用一个 api 来获取图像 url 并且当用户请求页面数据时同步完成。

    <% @comic.characters.each do |character| %>
        <div class = "col-sm-6 col-md-3">
            <div class = "thumbnail">
                <%= image_tag(get_character_thumbnail(character)) %>
            </div>
            <div class = "caption">
                <p><%= character['name'] %></p>
            </div>
        </div>
    <% end %>

我想强制每次调用 get_character_thumbnail(character) 都是异步完成的，页面不会卡住。

def get_character_thumbnail(character)
    response = HTTParty.get(character['resourceURI'], get_basic_api_options)
    response['data']['results'][0]['thumbnail']['path'] + '/portrait_large.jpg'
end

由于我对 ruby​​ on rails 还很陌生，所以我在设置 ajax 调用时遇到了一些困难。有没有人有可以帮助我的建议或链接？

Answer 1

您的路线应始终立即返回响应。这是您编写自定义端点来提供单个字符图像的一种方法。您的 html 页面将快速加载，然后您可以将 img src 属性设置为指向您的图像路由。

这里有一些示例代码来说明:

一些 html.erb 模板

<% @comic.characters.each do |character| %>
  <img src='/character_image/<%= character.id %>'>
<% end %>

一条新路线，get '/character_image/:id'

def character_image
  @char = Character.find(id: params[:id])
  img_path = "tmp/char_img_#{@char.id}.jpg"
  unless File.exists?(img_path)
    img_url = get_char_img(@char) # hit your API to get the url
    `wget #{img_url} -O #{img_path}`
  end
  send_file img_path, type: 'image/jpg', disposition: 'inline'
end

如果您的 html 页面已刷新，此代码将缓存图像以避免重复的 API 请求。

我在这里使用 tmp/ 是因为它是 Heroku 上的可写位置(它阻止文件系统写入其他位置)。在其他环境中(例如，本地)，您可以选择将图像保存到 public/，Rails 默认情况下静态提供。