如何使用动态源(JS)制作图像?

Question

我想为我的表格中的每个游戏添加一个徽标，它必须在第一列的标题之上。演示logo的链接在"源表的列，此列还定义:

L: 'Logo',

所以我需要使用这个Logo变量，并把它变成图像。

下面的字符串负责标题列，我需要以某种方式修改它:

{ field: 'Title', sortable: true, minWidth: 180, cellClass: 'title-column'}

我尝试了类似的东西，但它不起作用:

{ field: 'Title', sortable: true, minWidth: 180, cellClass: 'title-column', cellRenderer: function(params) {
const LogoLink = params.data.Link;
let content = "";
if (LogoLink) {
content += document.getElementById('make-image').src=LogoLink;
}

另外，标题列的过滤器不应该被打破(它可能会将图像链接的名称视为内容，这种情况不应该发生)。

也许应该是这样的:

{ field: 'Title', sortable: true, minWidth: 180, cellClass: 'title-column', cellRenderer: function(params) {
const LogoLink = params.data.Logo;
content = LogoLink + params.data.Title;
return content; }},

但我不知道如何包装LogoLink使其成为一个HTML图像。

完整工作代码:https://plnkr.co/plunk/w9bgMFlTF8JPK4t9

Answer 1

嗯，这个解决方案似乎有效:

{ field: 'Title', sortable: true, minWidth: 100, cellClass: 'title-column', cellRenderer: function(params) {
const LogoLink = params.data.Logo;
LogoLink.id = 'image';
content =  '<img src=' + LogoLink + ' class="logo-image">' + params.data.Title;
return content; }},

如果有任何错误/不好的编码，请纠正我。