Add image to tabel

src/db/client.ts

@@ -65,7 +65,7 @@ export const db = {
     );
     const insertId = (result as any).insertId as number;
     const [rows] = await pool.query(
-      `select id, manufacturer, model, sku, quantity, description, item_condition as cond, has_box as hasBox, image_path as imagePath, created_at as createdAt
+      `select id, manufacturer, model, sku, quantity, description, item_condition as cond, has_box as hasBox, image_path as imagePath, (image_data is not null) as hasImage, created_at as createdAt
        from items where id = ?`,
       [insertId]
     );
@@ -78,7 +78,7 @@ export const db = {
     const where = search ? 'where model like ? or sku like ?' : '';
     const params = search ? [`%${search}%`, `%${search}%`] : [];
     const [rows] = await pool.query(
-      `select id, manufacturer, model, sku, quantity, description, item_condition as cond, has_box as hasBox, image_path as imagePath, created_at as createdAt
+      `select id, manufacturer, model, sku, quantity, description, item_condition as cond, has_box as hasBox, image_path as imagePath, (image_data is not null) as hasImage, created_at as createdAt
        from items ${where} order by id asc`,
       params
     );
@@ -89,7 +89,7 @@ export const db = {
   async getItem(id: number) {
     await getReady();
     const [rows] = await pool.query(
-      `select id, manufacturer, model, sku, quantity, description, item_condition as cond, has_box as hasBox, image_path as imagePath, created_at as createdAt
+      `select id, manufacturer, model, sku, quantity, description, item_condition as cond, has_box as hasBox, image_path as imagePath, (image_data is not null) as hasImage, created_at as createdAt
        from items where id = ?`,
       [id]
     );

src/public/index.html

@@ -102,7 +102,7 @@
             <td>${it.condition}</td>
             <td>${it.description}</td>
             <td>${it.hasBox ? 'Yes' : 'No'}</td>
-            <td class="hide-sm">${it.imagePath ? 'Yes' : ''}</td>
+            <td class="hide-sm">${it.hasImage ? `<img src="/api/items/${it.id}/image" alt="img ${it.id}" style="max-width:100px; max-height:70px; border-radius:4px; border:1px solid #ddd;" />` : ''}</td>
             <td><button data-del="${it.id}" class="secondary">Delete</button></td>
           `;
           tableBody.appendChild(tr);

src/routes/api.ts

@@ -59,6 +59,24 @@ router.get('/items', async (req, res) => {
   }
 });
 
+// Serve item image as bytes
+router.get('/items/:id/image', async (req, res) => {
+  try {
+    const id = Number(req.params.id);
+    const item = await db.getItemWithImage(id);
+    if (!item || !(item as any).imageData) {
+      return res.status(404).json({ error: 'Image not found' });
+    }
+    const mime: string = (item as any).imageMime || 'application/octet-stream';
+    res.setHeader('Content-Type', mime);
+    res.setHeader('Cache-Control', 'public, max-age=31536000, immutable');
+    res.send(Buffer.from((item as any).imageData));
+  } catch (err: any) {
+    console.error(err);
+    res.status(500).json({ error: err.message || 'Failed to fetch image' });
+  }
+});
+
 router.get('/items/:id/pdf', async (req, res) => {
   try {
     const id = Number(req.params.id);