javascript - 我可以用 json 渲染图像吗？

Question

我正在使用 Typeahead 在下拉列表中呈现我的“用户”模型的实例:

Controller :

def typeahead
  render json: User.where(name: params[:query])
end

查看:

<input type="text" id="typeahead">
<script type="text/javascript">
  var bloodhound = new Bloodhound({
    datumTokenizer: function (d) {
      return Bloodhound.tokenizers.whitespace(d.value);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,

    remote: '/typeahead/%QUERY', 
    limit: 50
  });
  bloodhound.initialize();

  $('#typeahead').typeahead(null, {
    displayKey: 'name',
    source: bloodhound.ttAdapter()
  });

  $('#typeahead').bind('typeahead:selected', function(event, datum, name) {
    doSomething(datum.id);
  });
</script>

此代码会导致 User.name 的列表在我键入时下拉。

我可以渲染图像吗，在这种情况下 User.avatar.url(:thumb)？当我将 displayKey: 'name', 更改为 displayKey: 'avatar.url(:thumb)', 时，下拉列表只为每个用户显示“未定义”。

[我确保 User.avatar.url(:thumb) 在其他地方成功显示]

Answer 1

您需要在您的服务器上将图像编码为 base64，然后在您的 json 响应中返回结果字符串，最后在客户端使用此 base64 字符串填充您的图像

1- 服务器端:将图像编码为 base64

def typeahead
  users = User.where(name: params[:query])

  json = users.collect do |user|
    path = user.avatar.url(:thumb)
    image = open(path) { |io| io.read }
    base64 = ActiveSupport::Base64.encode64(image)

    {id: user.id, name: user.name, base64: base64}
  end

  render json: json
end

2- 客户端:使用模板填充用户名和图像

$('#typeahead').typeahead(null, {
  displayKey: 'name',
  source: bloodhound.ttAdapter()
  templates: {
    suggestion: Handlebars.compile('<p><img src="data:image/png;base64,{{base64}}">{{name}}</p>')
  }
});

注意1:未经测试，您可能需要做一些小的调整

注意 2:当您有一个大用户表和大量并发连接时，这将需要您的服务器提供大量功能，因为服务器必须为每个查询打开和编码许多图像文件。