Javascript 如何将图像作为链接填充，这两个链接都作为JSON对象存储在数组中？

请单击我的JSFIDLE链接，查看我正在尝试执行的代码。您会注意到，我将tile、image和link存储为JSON对象，但是当您运行我的代码时，它不会将我的标题和图像显示为HTML文件中指定的链接以及属性中指定的链接。我在这方面已经做了一段时间了，但我不知道它是什么时候出现的。有人对我有什么想法、建议或解决方案吗？我尝试将JavaScript中的输出设置为“”，但没有成功

HTML:

提前谢谢，非常感谢您的帮助
 您必须使用
”；

试试这个：

var data={"food":[
{
    "title":"Pumpkin Spice Bread Recipe",
    "image":"img/bread.jpg",
    "link":"http://willowbirdbaking.com/2011/09/18/pumpkin-spice-pull-apart-
bread-with-butter-rum-glaze/"
    }
]}

var output="<ul>";
// Create a variable to temporarily store the data 
for (var i in data.food) {
    output+="<li>" + data.food[i].title + "<img src='"+data.food[i].image+"' /> " + data.food[i].link + "</li>";
}
output+="</ul>";
// Once we go through all of the elements in the array, 
// we use the output variable to populate the placeholder div.
document.getElementById("food").innerHTML=output;  

var数据={“食物”：[
{
“标题”：“南瓜香料面包配方”，
“图像”：“img/bread.jpg”，
“链接”：http://willowbirdbaking.com/2011/09/18/pumpkin-spice-pull-apart-
奶油朗姆酒面包/
}
]}
var输出=“
”；
//创建一个变量以临时存储数据
for（data.food中的var i）{
输出+=“
”+数据.food[i]。标题+”+数据.food[i]。链接+“
”；
}
输出+=“
”；
//一旦我们遍历了数组中的所有元素，
//我们使用输出变量填充占位符div。
document.getElementById（“food”）.innerHTML=输出；

如果你想让你的图片成为链接，你必须把你的图片放到
中，它在
标签中。你只需要在上面加一个href属性，它就可以看起来像一个真正的链接。
谢谢，非常有用。这很完美，只是我想知道为什么除了图片之外没有显示标题？我不明白你的意思bit.Title现在在你悬停图像时显示？我没有这个。一切都很好-抱歉我解释得不够好…我希望标题显示在图像下方，而不需要悬停在它上面，只是我在HTML中如何设置它。如果我可以让所有内容都精确地显示在HTML中指定的内容，我会这正是我想要的…这更有意义吗？我更新了我的答案。我想告诉你一个秘密，有时候你可以稍微更改一下密码，它就会工作。非常感谢你，谢谢你的秘密，我会努力记住的，哈哈
var data={"food":[
{
    "title":"Pumpkin Spice Bread Recipe",
    "image":"img/bread.jpg",
    "link":"http://willowbirdbaking.com/2011/09/18/pumpkin-spice-pull-apart-
bread-with-butter-rum-glaze/"
    }
]}

var output="<ul>";
// Create a variable to temporarily store the data 
for (var i in data.food) {
    output+="<li>" + data.food[i].title + data.food[i].image +      data.food[i].link + "</li>";
}
output+="</ul>";
// Once we go through all of the elements in the array, 
// we use the output variable to populate the placeholder div.
document.getElementById("food").innerHTML=output;   

var data={"food":[
{
    "title":"Pumpkin Spice Bread Recipe",
    "image":"img/bread.jpg",
    "link":"http://willowbirdbaking.com/2011/09/18/pumpkin-spice-pull-apart-
bread-with-butter-rum-glaze/"
    }
]}

var output="<ul>";
// Create a variable to temporarily store the data 
for (var i in data.food) {
    output+="<li>" + data.food[i].title + "<img src='"+data.food[i].image+"' /> " + data.food[i].link + "</li>";
}
output+="</ul>";
// Once we go through all of the elements in the array, 
// we use the output variable to populate the placeholder div.
document.getElementById("food").innerHTML=output;  

for (var i in data.food) {
    output+="<li><a title='" + data.food[i].title + "' href='"+data.food[i].link+"'><img title='" + data.food[i].title + "' src='"+data.food[i].image+"' /></li>";
}

var data={"food":[
{
    "title":"Pumpkin Spice Bread Recipe",
    "image":"img/bread.jpg",
    "link":"http://willowbirdbaking.com/2011/09/18/pumpkin-spice-pull-apart-
bread-with-butter-rum-glaze/"
    }
]}

var output="<ul>";
// Create a variable to temporarily store the data 
for (var i in data.food) {
    output+="<li><a title='" + data.food[i].title + "' href='"+data.food[i].link+"'>" + data.food[i].title + "<img title='" + data.food[i].title + "' src='"+data.food[i].image+"' /></li>";
}
output+="</ul>";
// Once we go through all of the elements in the array, 
// we use the output variable to populate the placeholder div.
document.getElementById("food").innerHTML=output;