如何在Bootstrap表格列中从数据库字段动态显示Logo？

你之前的写法问题出在formatter函数没有正确获取并使用logo字段的动态值，而且混用了后端模板语法（{{ logo }}、{% get_static_prefix %}），这些语法在前端原生JavaScript里不会被解析，自然无法生成正确的图片路径。

直接修改Logo列的formatter配置即可，代码如下：

{
  align: 'center',
  formatter: function(value) {
    // value就是当前行logo字段的原始值（比如'/logos/name_of_image.png'）
    const basePrefix = 'https://path_to_client';
    const fullImgUrl = basePrefix + value;
    return `<div class="col-md-4"><img class="img" src="${fullImgUrl}" alt="商家Logo"></div>`;
  },
  field: 'logo',
  title: 'Logo',
  sortable: true,
}

关键说明： #

1. Bootstrap Table的formatter函数第一个参数value，就是当前列对应字段（这里是logo）的实际值，直接用它来拼接前缀即可。
2. 使用ES6模板字符串（反引号`）来拼接HTML内容，能更直观地插入动态变量。
3. 如果你需要保留后端静态前缀（比如Django的{% get_static_prefix %}），可以先在页面全局定义变量再使用：

   <script>
     // 先在页面顶部用后端模板语法注入静态前缀
     const staticPrefix = '{% get_static_prefix %}';
   </script>
   

   然后在formatter里改为：

   const fullImgUrl = staticPrefix + 'https://path_to_client' + value;
   

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