如何将图片数组动态插入Fotorama画廊的data数组？

你的核心问题是把对象拼成了字符串存入数组，但Fotorama的data选项需要的是JavaScript对象数组，不是字符串数组。修改代码即可解决：

正确的数组构建与初始化代码 #

var imgArray = [];
// 遍历images数组，推荐用for...of避免遍历原型属性
for (const img of images) {
    // 直接推入对象，不要拼接成字符串
    imgArray.push({
        img: img.medium,
        thumb: img.medium
    });
}

// 初始化Fotorama时直接传入imgArray
$('.fotorama').fotorama({
    data: imgArray
});

原代码的问题所在 #

你之前把每个图片项拼成了带转义引号的字符串，比如'{img:"xxx"...}'，这本质是字符串类型，Fotorama无法将其识别为有效的图片配置对象。直接创建对象并推入数组，才能让插件正确解析每个图片的img和thumb属性。

简化写法（可选） #

如果images是数组或可遍历对象，还可以用map方法一步生成目标数组：

const imgArray = Array.from(images).map(item => ({
    img: item.medium,
    thumb: item.medium
}));

$('.fotorama').fotorama({
    data: imgArray
});

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