Как заполнить изображение ссылкой, которая хранится в массиве как объекты JSON?

Вы должны использовать <img/> для вывода изображения. Ваша ошибка в том, что вы только что отправили ссылку на изображение.

Использовать тег ссылки на изображение: var bob = "some text <img src='"+data.food[i].image+"'/>";

Попробуй это:

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;  

Если вы хотите, чтобы ваше изображение было ссылкой, вы должны поместить свое изображение в тег <a></a> следующим образом:

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;  

И jsfiddle.