如何在Algolia搜索结果中添加图片预览功能

你遇到的问题可通过以下步骤逐一排查修复：

1. 修正JSON语法错误
   你提供的索引数据JSON存在语法问题，content字段末尾缺少英文逗号，会导致数据提交异常，修正后的正确格式如下：

{
  "url": "my-sample-website.html",
  "title": "Harry Potter and the Sorcerer's Stone",
  "content": "something about this page",
  "image": "https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1474154022l/3._SY475_.jpg"
}

2. 确认索引配置正确
   提交修正后的数据到Algolia后，进入Algolia控制台对应索引的「浏览」页面，查看单条记录是否已经包含image字段，值是否正常。
   同时进入索引的「配置」-「检索和展示」-「要检索的属性」，确认image已经被加入到attributesToRetrieve列表中，避免搜索时该字段被过滤不返回。
3. 修改前端搜索结果的渲染模板
   Algolia本身仅负责数据检索，所有展示样式都需要开发者手动配置：

• 若使用InstantSearch.js组件库，修改hits组件的item模板，插入图片标签引用image字段即可，示例代码如下：

// InstantSearch.js hits 组件配置示例
instantsearch.widgets.hits({
  container: '#hits',
  templates: {
    item: `
      <div class="search-hit">
        <img src="{{image}}" alt="{{title}}" style="width:80px;height:auto;float:left;margin-right:12px;" />
        <div class="hit-info">
          <h4>{{title}}</h4>
          <p>{{#helpers.snippet}}{ "attribute": "content" }{{/helpers.snippet}}</p>
        </div>
        <div style="clear:both"></div>
      </div>
    `
  }
})

• 若使用Autocomplete.js或者自定义搜索逻辑，直接在渲染每条搜索结果的代码中，拿到返回的hit对象的image属性，赋值给img标签的src属性即可。

若完成以上步骤后图片仍无法加载，可检查图片URL是否允许跨域访问，字段名是否和索引中存储的完全一致（区分大小写）。

内容的提问来源于stack exchange，提问作者ixcode