使用jQuery/JavaScript在图像上插入/显示对象的属性

我已经尝试过实现这个结果，但是我被下面给出的结果卡住了，我想在图像上添加文本，但是我无法访问对象的属性，我使用了

after（）

方法，但是没有工作。希望您能提供帮助

$（文档）.ready（函数（）{
让aku={
ObjectUrl:'https://s3.amazonaws.com/mohanrfrontendtest/square1.png',
ResourceName:'level-1'，
资源：{
ObjectUrl:'https://s3.amazonaws.com/mohanrfrontendtest/square2.png',
ResourceName:'level-2'，
资源：{
ObjectUrl:'https://s3.amazonaws.com/mohanrfrontendtest/square3.png',
ResourceName:“三级”
}
}
}
设abhi=[aku.ObjectUrl，
aku.resources.ObjectUrl，
aku.resources.resources.ObjectUrl
]
$（“img id”）.attr（“src”，abhi[0]）；
$（“img-id-1”）.attr（“src”，abhi[1]）；
$（“img-id-2”）.attr（“src”，abhi[2]）；
});
*{
填充：0；
保证金：0；
框大小：边框框；
}
#img-id{
位置：固定；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
#img-id-1{
位置：固定；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
宽度：25em；
高度：25公分；
z指数：-1；
}
#img-id-2{
位置：固定；
宽度：13em；
高度：10公分；
最高：46%；
左：50%；
转换：翻译（-50%，-50%）；
z指数：10；
}

文件
检查此代码


$（文档）.ready（函数（）{
让aku={
ObjectUrl:'https://s3.amazonaws.com/mohanrfrontendtest/square1.png',
ResourceName:'level-1'，
资源：
{
ObjectUrl:'https://s3.amazonaws.com/mohanrfrontendtest/square2.png',
ResourceName:'level-2'，
资源：
{
ObjectUrl:'https://s3.amazonaws.com/mohanrfrontendtest/square3.png',
ResourceName:“三级”
}
}
}
设abhi=[aku.ObjectUrl，
aku.resources.ObjectUrl，
aku.resources.resources.ObjectUrl
];
//图片下方的文本
$（“img id”）.attr（“src”，abhi[0]）；
$（“img-id-1”）.attr（“src”，abhi[1]）；
$（“img-id-2”）.attr（“src”，abhi[2]）；
函数getResourceName（obj，url）{
用于（obj中的var k）{
if（obj[k]==url）{
返回obj.ResourceName；
}
else if（k==“资源”）
返回getResourceName（obj[k]，url）；
}
}
$（“img”）。在（'load'，函数（）{
var resourceName=getResourceName（aku，$（this.attr（“src”））；
$（this）.after（“”+resourceName+“”）；
});
});
*{
填充：0；
保证金：0；
框大小：边框框；
}
#img-id{
位置：固定；
最高：50%；
左：50%；
宽度：12em；
高度：7公分；
转换：翻译（-50%，-50%）；
}
#img-id-1：之后{
内容：“-记住这一点”；
背景颜色：黄色；
颜色：红色；
字体大小：粗体；
}
#img-id-1{
位置：固定；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
宽度：15em；
高度：11em；
z指数：-1；
}
#img-id-2{
位置：固定；
宽度：7em；
高度：4em；
最高：46%；
左：50%；
转换：翻译（-50%，-50%）；
z指数：10；
}
.标题{
位置：固定；
左：48%；
}