Update static/script.js

static/script.js

@@ -105,9 +105,17 @@ function displayIngredientsList(ingredients) {
     ingredients.forEach(ingredient => {
         const item = document.createElement('div');
         item.className = 'ingredient-item';
+        const img = document.createElement('img');
+        img.src = ingredient.image_url || '/static/placeholder.png'; // Use local placeholder if no image_url
+        img.alt = ingredient.name;
+        img.style.width = '80px';
+        img.style.height = '80px';
+        img.style.objectFit = 'cover';
+        img.style.borderRadius = '5px';
         const name = document.createElement('div');
         name.textContent = ingredient.name;
         name.style.textAlign = 'center';
+        name.style.marginTop = '5px';
         name.style.fontSize = '12px';
         const button = document.createElement('button');
         button.textContent = 'Add';
@@ -117,6 +125,7 @@ function displayIngredientsList(ingredients) {
                 displaySelectedIngredients();
             }
         };
+        item.appendChild(img);
         item.appendChild(name);
         item.appendChild(button);
         ingredientsList.appendChild(item);