使用Javascript或jquery动态显示多个图像

我正在为网页使用小部件。有一个JSON，它提供关于每个网格上应该有什么图像的数据（捕获JSON中的文本，然后加载数据库中相应的图像）。目前，我可以在网格上显示单个图像。我的目标是在网格上显示多个图像。多个图像将以逗号分隔的名称显示在json中

当前JSON的格式为：

var json = [{
    "html": 'abc.png',
    "col": 1,
    "row": 1,
    "size_y": 2,
    "size_x": 2
}, {
    "html": "xyz.png",
    "col": 4,
    "row": 1,
    "size_y": 2,
    "size_x": 2
},
{
    "html": "def.png",
    "col": 6,
    "row": 1,
    "size_y": 2,
    "size_x": 2
},
{
    "html": "abc.png",
    "col": 1,
    "row": 3,
    "size_y": 1,
    "size_x": 1
}, {
    "html": "def.png",
    "col": 4,
    "row": 3,
    "size_y": 1,
    "size_x": 1
},
{
    "html": "abc.png    ",
    "col": 6,
    "row": 3,
    "size_y": 1,
    "size_x": 1
}

];

var json = [{
    "html": "abc.png,xyz.png,def.png',  //3 Images
    "col": 1,
    "row": 1,
    "size_y": 2,
    "size_x": 2
}, {
    "html": "xyz.png", //1 Image
    "col": 4,
    "row": 1,
    "size_y": 2,
    "size_x": 2
},
{
    "html": "def.png,abc.png", //2 Images
    "col": 6,
    "row": 1,
    "size_y": 2,
    "size_x": 2
},
{
    "html": "abc.png", //1 Image
    "col": 1,
    "row": 3,
    "size_y": 1,
    "size_x": 1
}, {
    "html": "def.png,abc.png", //2 Images
    "col": 4,
    "row": 3,
    "size_y": 1,
    "size_x": 1
},

{
    "html": "abc.png", // 1 Image
    "col": 6,
    "row": 3,
    "size_y": 1,
    "size_x": 1
}

];

每个网格只有一个图像

新的JSON将采用以下形式：

var json = [{
    "html": 'abc.png',
    "col": 1,
    "row": 1,
    "size_y": 2,
    "size_x": 2
}, {
    "html": "xyz.png",
    "col": 4,
    "row": 1,
    "size_y": 2,
    "size_x": 2
},
{
    "html": "def.png",
    "col": 6,
    "row": 1,
    "size_y": 2,
    "size_x": 2
},
{
    "html": "abc.png",
    "col": 1,
    "row": 3,
    "size_y": 1,
    "size_x": 1
}, {
    "html": "def.png",
    "col": 4,
    "row": 3,
    "size_y": 1,
    "size_x": 1
},
{
    "html": "abc.png    ",
    "col": 6,
    "row": 3,
    "size_y": 1,
    "size_x": 1
}

];

var json = [{
    "html": "abc.png,xyz.png,def.png',  //3 Images
    "col": 1,
    "row": 1,
    "size_y": 2,
    "size_x": 2
}, {
    "html": "xyz.png", //1 Image
    "col": 4,
    "row": 1,
    "size_y": 2,
    "size_x": 2
},
{
    "html": "def.png,abc.png", //2 Images
    "col": 6,
    "row": 1,
    "size_y": 2,
    "size_x": 2
},
{
    "html": "abc.png", //1 Image
    "col": 1,
    "row": 3,
    "size_y": 1,
    "size_x": 1
}, {
    "html": "def.png,abc.png", //2 Images
    "col": 4,
    "row": 3,
    "size_y": 1,
    "size_x": 1
},

{
    "html": "abc.png", // 1 Image
    "col": 6,
    "row": 3,
    "size_y": 1,
    "size_x": 1
}

];

所以旧的形式就像

 "html":"image1"

"html":"image1,image2,....imageN"

新形式就像

 "html":"image1"

"html":"image1,image2,....imageN"

创建小部件的JS如下所示：

for(var index=0;index<json.length;index++) {
  {% load static %}
  gridster.add_widget('<li class="new" ><button class="delete-widget-button" style="float: right;">-</button><img src="{% get_static_prefix %}images/'+json[index].html+'"></li>',json[index].size_x,json[index].size_y,json[index].col,json[index].row);
 };

---

for（var index=0；index我对gridster不太熟悉，但也许这对你有用-

拆分图像文件名字符串，然后让另一个嵌套循环生成输出字符串-

var images = json[index].html.split(',');
var imageOutput = "";

for(var j = 0; j < images.length; j++) {
    imageOutput += '<img src="{% get_static_prefix %}images/'+ images[j] +'">';
}

gridster.add_widget('<li class="new" ><button class="delete-widget-button" style="float: right;">-</button>' + imageOutput + '</li>',json[index].size_x,json[index].size_y,json[index].col,json[index].row);

var images=json[index].html.split（'，'）；
var imageOutput=“”；
对于（var j=0；j-'+imageOutput+''，json[index].size_x，json[index].size_y，json[index].col，json[index].row）；

我在这里试过了，但我认为它现在可以正常工作了。哦，我错了，我忘了使用
图像[j]
在嵌套的for循环中。检查编辑我正在努力将其放入小提琴中这是我尝试过的我不确定您想要的结果/外观是什么-这是我想要的，我指的是带有删除功能的网格上的多个图像。但除此之外，我还想要此处显示的其他字段（网格上具有图像链接的textarea和当我单击serialize时，它应该在textarea中使用id log生成json）