在 Wenhixin bootstrap-table 中包含图像
Posted
技术标签:
【中文标题】在 Wenhixin bootstrap-table 中包含图像【英文标题】：Including image in Wenhixin bootstrap-table 【发布时间】：2016-02-13 13:32:51 【问题描述】：我正在使用 Wenhixin bootstrap-table.js。我的表应该如下表所示。 下面给出了创建表的代码
<table class="table-bodered" data-classes="table table-hover table-condensed" data-toggle="table" data-url="http://localhost:1337/users" data-pagination="true" data-search="true" data->
<thead>
<tr>
<th data-field="profile_url">Picture</th>
<th data-field="fullname">Name</th>
<th data-field="SerialNo">Phone Number</th>
<th data-field="username">Login ID</th>
<th data-field="Image">Action</th>
</tr>
</thead>
</table>
但是，如果没有将 image-url 转换为 image，表格如下所示
为了得到表格中的头像，我写了下面的代码。
var data;
$.ajax(
type: "GET",
url: "http://localhost:1337/users",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: "",
success: function (data)
console.log(data); //This is your result
console.log(data[1].profile_url);
for (var i = 0; i < data.length; i++)
var node = document.createElement("LI");
var x = document.createElement("IMG");
x.setAttribute("src", data[1].profile_url);
x.setAttribute("width", "304");
x.setAttribute("width", "228");
x.setAttribute("alt", "The Pulpit Rock");
node.appendChild(x);
document.getElementById("myList").appendChild(node);
);
从那里，我可以从从服务器获取的 url 获取图像。这让我很难将这张图片放在图片列中（如屏幕截图所示）。 现在，我想知道如何放置这个由 Bootstrap-table.js 动态创建的图像 快速回答将不胜感激。
【问题讨论】：
【参考方案1】：你可以使用单元格格式
<body>
<div class="container">
<h1>Format</h1>
<p>Use <code>formatter</code> column option to format the display of bootstrap table column.</p>
<table id="table"
data-toggle="table"
data-
data-url="../json/data1.json">
<thead>
<tr>
<th data-field="profile_url" data-formatter="imageFormatter">Picture</th>
</tr>
</thead>
</table>
</div>
<script>
function imageFormatter(value, row)
return '<img src="'+value+'" />';
</script>
可以参考文档
http://issues.wenzhixin.net.cn/bootstrap-table/#options/format.html
【讨论】：
感谢您的回答。如果您可以在上面的代码中展示如何实现 data[1].profile_url，那将是非常有帮助的。提前致谢。 我认为，你不需要实现 data[1].profile_url，imageFormatter 用于将“url”转换为“img”，它会渲染 img 而不是图像 url 这是一个例子：issues.wenzhixin.net.cn/bootstrap-table/#issues/579.html 和一个问题：github.com/wenzhixin/bootstrap-table/issues/579 我使用类似的解决方案来下载文件。我喜欢这种单元格格式化程序的灵活性。 @Sean 非常感谢 :) :D以上是关于在 Wenhixin bootstrap-table 中包含图像的主要内容，如果未能解决你的问题，请参考以下文章
NOIP 2015 & SDOI 2016 Round1 & CTSC 2016 & SDOI2016 Round2游记