¿Por qué no se guardan solos con Live Server o abriendo el HTML?
Por seguridad universal del navegador, JavaScript en el cliente no puede escribir directamente en el disco duro del servidor web sin una ruta API (endpoint POST). Sin este script de servidor, las imágenes se indexan en pantalla pero no se guardan en tu carpeta física.
Opción A: Mini Servidor Node.js (Recomendado)
Crea un archivo llamado server.js en la misma carpeta:
const http = require('http');
const fs = require('fs');
const path = require('path');
const PORT = 3000;
const IMG_DIR = path.join(__dirname, 'img');
if (!fs.existsSync(IMG_DIR)) fs.mkdirSync(IMG_DIR);
http.createServer((req, res) => {
// Endpoint de subida
if (req.method === 'POST' && (req.url === '/upload' || req.url === '/api/upload')) {
const filename = decodeURIComponent(req.headers['x-filename'] || `img_${Date.now()}.png`);
const filePath = path.join(IMG_DIR, path.basename(filename));
const writeStream = fs.createWriteStream(filePath);
req.pipe(writeStream);
writeStream.on('finish', () => {
res.writeHead(200, { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' });
res.end(JSON.stringify({ success: true, file: `/img/${path.basename(filename)}` }));
});
return;
}
// Servir archivos estáticos
let filePath = path.join(__dirname, req.url === '/' ? 'index.html' : req.url);
fs.readFile(filePath, (err, content) => {
if (err) { res.writeHead(404); res.end('No encontrado'); }
else { res.writeHead(200); res.end(content); }
});
}).listen(PORT, () => console.log(`Servidor activo en http://localhost:${PORT}`));
Opción B: Sin backend usando la API nativa de disco
Si no deseas ejecutar Node ni Python, haz clic primero en "Abrir Carpeta" y selecciona la carpeta de tu proyecto. El navegador te pedirá permiso de lectura/escritura y escribirá las imágenes directamente en la subcarpeta /img de tu disco duro sin necesidad de backend.