From 83047721a3c6aaa3d4d032fec8d72d93c4e738dc Mon Sep 17 00:00:00 2001
From: dmolinari <dmolinari@eldia.com>
Date: Wed, 3 Sep 2025 18:36:54 -0300
Subject: [PATCH] Fix Img Url

---
 Elecciones-Web/frontend/src/apiService.ts                  | 7 +++++++
 .../frontend/src/components/ConcejalesPorSeccionWidget.tsx | 4 ++--
 .../frontend/src/components/ConcejalesTickerWidget.tsx     | 4 ++--
 .../frontend/src/components/ConcejalesWidget.tsx           | 4 ++--
 .../frontend/src/components/DipSenTickerWidget.tsx         | 4 ++--
 .../frontend/src/components/DiputadosPorSeccionWidget.tsx  | 4 ++--
 .../frontend/src/components/DiputadosTickerWidget.tsx      | 4 ++--
 Elecciones-Web/frontend/src/components/DiputadosWidget.tsx | 4 ++--
 .../frontend/src/components/ResumenGeneralWidget.tsx       | 4 ++--
 .../frontend/src/components/SenadoresPorSeccionWidget.tsx  | 4 ++--
 .../frontend/src/components/SenadoresTickerWidget.tsx      | 4 ++--
 Elecciones-Web/frontend/src/components/SenadoresWidget.tsx | 4 ++--
 12 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/Elecciones-Web/frontend/src/apiService.ts b/Elecciones-Web/frontend/src/apiService.ts
index 68badf8..6f6f486 100644
--- a/Elecciones-Web/frontend/src/apiService.ts
+++ b/Elecciones-Web/frontend/src/apiService.ts
@@ -4,6 +4,13 @@ import type { ProyeccionBancas, MunicipioSimple, TelegramaData, CatalogoItem, Ca
 
 const API_BASE_URL = 'https://elecciones2025.eldia.com/api';
 
+// Determina la URL base para los activos (imágenes, etc.)
+// Si estamos en desarrollo (npm run dev), usa una ruta relativa a la raíz.
+// Si estamos en producción (npm run build), usa la URL completa del servidor de widgets.
+export const assetBaseUrl = import.meta.env.DEV 
+  ? '' 
+  : 'https://elecciones2025.eldia.com';
+
 const apiClient = axios.create({
   baseURL: API_BASE_URL,
   headers: { 'Content-Type': 'application/json' },
diff --git a/Elecciones-Web/frontend/src/components/ConcejalesPorSeccionWidget.tsx b/Elecciones-Web/frontend/src/components/ConcejalesPorSeccionWidget.tsx
index 908768d..9cd8d98 100644
--- a/Elecciones-Web/frontend/src/components/ConcejalesPorSeccionWidget.tsx
+++ b/Elecciones-Web/frontend/src/components/ConcejalesPorSeccionWidget.tsx
@@ -2,7 +2,7 @@
 import { useState, useMemo, useEffect } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import Select from 'react-select';
-import { getSeccionesElectorales, getResultadosPorSeccion, getConfiguracionPublica } from '../apiService';
+import { getSeccionesElectorales, getResultadosPorSeccion, getConfiguracionPublica, assetBaseUrl } from '../apiService';
 import type { MunicipioSimple, ResultadoTicker, ApiResponseResultadosPorSeccion } from '../types/types';
 import { ImageWithFallback } from './ImageWithFallback';
 import './TickerWidget.css'; // Reutilizamos los estilos del ticker
@@ -105,7 +105,7 @@ export const ConcejalesPorSeccionWidget = () => {
         {displayResults.map(partido => (
           <div key={partido.id} className="ticker-party">
             <div className="party-logo">
-              <ImageWithFallback src={partido.logoUrl || undefined} fallbackSrc="/default-avatar.png" alt={`Logo de ${partido.nombre}`} />
+              <ImageWithFallback src={partido.logoUrl || undefined} fallbackSrc={`${assetBaseUrl}/default-avatar.png`} alt={`Logo de ${partido.nombre}`} />
             </div>
             <div className="party-details">
               <div className="party-info">
diff --git a/Elecciones-Web/frontend/src/components/ConcejalesTickerWidget.tsx b/Elecciones-Web/frontend/src/components/ConcejalesTickerWidget.tsx
index 8a5800d..5634d60 100644
--- a/Elecciones-Web/frontend/src/components/ConcejalesTickerWidget.tsx
+++ b/Elecciones-Web/frontend/src/components/ConcejalesTickerWidget.tsx
@@ -1,7 +1,7 @@
 // src/components/ConcejalesTickerWidget.tsx
 import { useMemo } from 'react';
 import { useQuery } from '@tanstack/react-query';
-import { getResumenProvincial, getConfiguracionPublica } from '../apiService';
+import { getResumenProvincial, getConfiguracionPublica, assetBaseUrl } from '../apiService';
 import type { CategoriaResumen, ResultadoTicker } from '../types/types';
 import { ImageWithFallback } from './ImageWithFallback';
 import './TickerWidget.css'; // Reutilizamos los mismos estilos
@@ -65,7 +65,7 @@ export const ConcejalesTickerWidget = () => {
         {displayResults.map(partido => (
           <div key={partido.id} className="ticker-party">
             <div className="party-logo">
-              <ImageWithFallback src={partido.logoUrl || undefined} fallbackSrc="/default-avatar.png" alt={`Logo de ${partido.nombre}`} />
+              <ImageWithFallback src={partido.logoUrl || undefined} fallbackSrc={`${assetBaseUrl}/default-avatar.png`} alt={`Logo de ${partido.nombre}`} />
             </div>
             <div className="party-details">
               <div className="party-info">
diff --git a/Elecciones-Web/frontend/src/components/ConcejalesWidget.tsx b/Elecciones-Web/frontend/src/components/ConcejalesWidget.tsx
index bd0313b..dcd5542 100644
--- a/Elecciones-Web/frontend/src/components/ConcejalesWidget.tsx
+++ b/Elecciones-Web/frontend/src/components/ConcejalesWidget.tsx
@@ -2,7 +2,7 @@
 import { useState, useMemo, useEffect } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import Select from 'react-select';
-import { getMunicipios, getResultadosPorMunicipio, getConfiguracionPublica } from '../apiService';
+import { getMunicipios, getResultadosPorMunicipio, getConfiguracionPublica, assetBaseUrl } from '../apiService';
 import type { MunicipioSimple, ResultadoTicker } from '../types/types';
 import { ImageWithFallback } from './ImageWithFallback';
 import './TickerWidget.css';
@@ -96,7 +96,7 @@ export const ConcejalesWidget = () => {
         {displayResults.map(partido => (
           <div key={partido.id} className="ticker-party">
             <div className="party-logo">
-              <ImageWithFallback src={partido.logoUrl || undefined} fallbackSrc="/default-avatar.png" alt={`Logo de ${partido.nombre}`} />
+              <ImageWithFallback src={partido.logoUrl || undefined} fallbackSrc={`${assetBaseUrl}/default-avatar.png`} alt={`Logo de ${partido.nombre}`} />
             </div>
             <div className="party-details">
               <div className="party-info">
diff --git a/Elecciones-Web/frontend/src/components/DipSenTickerWidget.tsx b/Elecciones-Web/frontend/src/components/DipSenTickerWidget.tsx
index a071989..d430fa0 100644
--- a/Elecciones-Web/frontend/src/components/DipSenTickerWidget.tsx
+++ b/Elecciones-Web/frontend/src/components/DipSenTickerWidget.tsx
@@ -1,6 +1,6 @@
 // src/components/DipSenTickerWidget.tsx
 import { useQuery } from '@tanstack/react-query';
-import { getResumenProvincial, getConfiguracionPublica } from '../apiService';
+import { getResumenProvincial, getConfiguracionPublica, assetBaseUrl } from '../apiService';
 import type { CategoriaResumen, ResultadoTicker } from '../types/types';
 import { ImageWithFallback } from './ImageWithFallback';
 import './TickerWidget.css';
@@ -71,7 +71,7 @@ export const DipSenTickerWidget = () => {
                   <div className="party-logo">
                     <ImageWithFallback
                       src={partido.logoUrl || undefined}
-                      fallbackSrc="/default-avatar.png"
+                      fallbackSrc={`${assetBaseUrl}/default-avatar.png`}
                       alt={`Logo de ${partido.nombre}`}
                     />
                   </div>
diff --git a/Elecciones-Web/frontend/src/components/DiputadosPorSeccionWidget.tsx b/Elecciones-Web/frontend/src/components/DiputadosPorSeccionWidget.tsx
index 9a7580c..7383756 100644
--- a/Elecciones-Web/frontend/src/components/DiputadosPorSeccionWidget.tsx
+++ b/Elecciones-Web/frontend/src/components/DiputadosPorSeccionWidget.tsx
@@ -2,7 +2,7 @@
 import { useState, useMemo, useEffect } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import Select from 'react-select';
-import { getSeccionesElectorales, getResultadosPorSeccion, getConfiguracionPublica } from '../apiService';
+import { getSeccionesElectorales, getResultadosPorSeccion, getConfiguracionPublica, assetBaseUrl } from '../apiService';
 import type { MunicipioSimple, ResultadoTicker, ApiResponseResultadosPorSeccion } from '../types/types';
 import { ImageWithFallback } from './ImageWithFallback';
 import './TickerWidget.css';
@@ -108,7 +108,7 @@ export const DiputadosPorSeccionWidget = () => {
         {displayResults.map(partido => (
           <div key={partido.id} className="ticker-party">
             <div className="party-logo">
-              <ImageWithFallback src={partido.logoUrl || undefined} fallbackSrc="/default-avatar.png" alt={`Logo de ${partido.nombre}`} />
+              <ImageWithFallback src={partido.logoUrl || undefined} fallbackSrc={`${assetBaseUrl}/default-avatar.png`} alt={`Logo de ${partido.nombre}`} />
             </div>
             <div className="party-details">
               <div className="party-info">
diff --git a/Elecciones-Web/frontend/src/components/DiputadosTickerWidget.tsx b/Elecciones-Web/frontend/src/components/DiputadosTickerWidget.tsx
index 7160462..c6cca3a 100644
--- a/Elecciones-Web/frontend/src/components/DiputadosTickerWidget.tsx
+++ b/Elecciones-Web/frontend/src/components/DiputadosTickerWidget.tsx
@@ -1,7 +1,7 @@
 // src/components/DiputadosTickerWidget.tsx
 import { useMemo } from 'react';
 import { useQuery } from '@tanstack/react-query';
-import { getResumenProvincial, getConfiguracionPublica } from '../apiService';
+import { getResumenProvincial, getConfiguracionPublica, assetBaseUrl } from '../apiService';
 import type { CategoriaResumen, ResultadoTicker } from '../types/types';
 import { ImageWithFallback } from './ImageWithFallback';
 import './TickerWidget.css';
@@ -65,7 +65,7 @@ export const DiputadosTickerWidget = () => {
         {displayResults.map(partido => (
           <div key={partido.id} className="ticker-party">
             <div className="party-logo">
-              <ImageWithFallback src={partido.logoUrl || undefined} fallbackSrc="/default-avatar.png" alt={`Logo de ${partido.nombre}`} />
+              <ImageWithFallback src={partido.logoUrl || undefined} fallbackSrc={`${assetBaseUrl}/default-avatar.png`} alt={`Logo de ${partido.nombre}`} />
             </div>
             <div className="party-details">
               <div className="party-info">
diff --git a/Elecciones-Web/frontend/src/components/DiputadosWidget.tsx b/Elecciones-Web/frontend/src/components/DiputadosWidget.tsx
index 276ea58..1b1ac4f 100644
--- a/Elecciones-Web/frontend/src/components/DiputadosWidget.tsx
+++ b/Elecciones-Web/frontend/src/components/DiputadosWidget.tsx
@@ -2,7 +2,7 @@
 import { useState, useMemo, useEffect } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import Select from 'react-select';
-import { getMunicipios, getResultadosPorMunicipio, getConfiguracionPublica } from '../apiService';
+import { getMunicipios, getResultadosPorMunicipio, getConfiguracionPublica, assetBaseUrl } from '../apiService';
 import type { MunicipioSimple, ResultadoTicker } from '../types/types';
 import { ImageWithFallback } from './ImageWithFallback';
 import './TickerWidget.css';
@@ -98,7 +98,7 @@ export const DiputadosWidget = () => {
         {displayResults.map(partido => (
           <div key={partido.id} className="ticker-party">
             <div className="party-logo">
-              <ImageWithFallback src={partido.logoUrl || undefined} fallbackSrc="/default-avatar.png" alt={`Logo de ${partido.nombre}`} />
+              <ImageWithFallback src={partido.logoUrl || undefined} fallbackSrc={`${assetBaseUrl}/default-avatar.png`} alt={`Logo de ${partido.nombre}`} />
             </div>
             <div className="party-details">
               <div className="party-info">
diff --git a/Elecciones-Web/frontend/src/components/ResumenGeneralWidget.tsx b/Elecciones-Web/frontend/src/components/ResumenGeneralWidget.tsx
index 7fb45fd..b7afe95 100644
--- a/Elecciones-Web/frontend/src/components/ResumenGeneralWidget.tsx
+++ b/Elecciones-Web/frontend/src/components/ResumenGeneralWidget.tsx
@@ -1,7 +1,7 @@
 // src/components/ResumenGeneralWidget.tsx
 import { useMemo } from 'react';
 import { useQuery } from '@tanstack/react-query';
-import { getResumenProvincial, getConfiguracionPublica } from '../apiService';
+import { getResumenProvincial, getConfiguracionPublica, assetBaseUrl } from '../apiService';
 import type { CategoriaResumen, ResultadoTicker } from '../types/types';
 import { ImageWithFallback } from './ImageWithFallback';
 import './TickerWidget.css';
@@ -98,7 +98,7 @@ export const ResumenGeneralWidget = () => {
         {displayResults.map(partido => (
           <div key={partido.id} className="ticker-party">
             <div className="party-logo">
-              <ImageWithFallback src={partido.logoUrl || undefined} fallbackSrc="/default-avatar.png" alt={`Logo de ${partido.nombre}`} />
+              <ImageWithFallback src={partido.logoUrl || undefined} fallbackSrc={`${assetBaseUrl}/default-avatar.png`} alt={`Logo de ${partido.nombre}`} />
             </div>
             <div className="party-details">
               <div className="party-info">
diff --git a/Elecciones-Web/frontend/src/components/SenadoresPorSeccionWidget.tsx b/Elecciones-Web/frontend/src/components/SenadoresPorSeccionWidget.tsx
index 9723eab..7bc8252 100644
--- a/Elecciones-Web/frontend/src/components/SenadoresPorSeccionWidget.tsx
+++ b/Elecciones-Web/frontend/src/components/SenadoresPorSeccionWidget.tsx
@@ -2,7 +2,7 @@
 import { useState, useMemo, useEffect } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import Select from 'react-select';
-import { getSeccionesElectorales, getResultadosPorSeccion, getConfiguracionPublica } from '../apiService';
+import { getSeccionesElectorales, getResultadosPorSeccion, getConfiguracionPublica, assetBaseUrl } from '../apiService';
 import type { MunicipioSimple, ResultadoTicker, ApiResponseResultadosPorSeccion } from '../types/types';
 import { ImageWithFallback } from './ImageWithFallback';
 import './TickerWidget.css';
@@ -108,7 +108,7 @@ export const SenadoresPorSeccionWidget = () => {
         {displayResults.map(partido => (
           <div key={partido.id} className="ticker-party">
             <div className="party-logo">
-              <ImageWithFallback src={partido.logoUrl || undefined} fallbackSrc="/default-avatar.png" alt={`Logo de ${partido.nombre}`} />
+              <ImageWithFallback src={partido.logoUrl || undefined} fallbackSrc={`${assetBaseUrl}/default-avatar.png`} alt={`Logo de ${partido.nombre}`} />
             </div>
             <div className="party-details">
               <div className="party-info">
diff --git a/Elecciones-Web/frontend/src/components/SenadoresTickerWidget.tsx b/Elecciones-Web/frontend/src/components/SenadoresTickerWidget.tsx
index c867480..616630d 100644
--- a/Elecciones-Web/frontend/src/components/SenadoresTickerWidget.tsx
+++ b/Elecciones-Web/frontend/src/components/SenadoresTickerWidget.tsx
@@ -1,7 +1,7 @@
 // src/components/SenadoresTickerWidget.tsx
 import { useMemo } from 'react';
 import { useQuery } from '@tanstack/react-query';
-import { getResumenProvincial, getConfiguracionPublica } from '../apiService';
+import { getResumenProvincial, getConfiguracionPublica, assetBaseUrl } from '../apiService';
 import type { CategoriaResumen, ResultadoTicker } from '../types/types';
 import { ImageWithFallback } from './ImageWithFallback';
 import './TickerWidget.css'; // Reutilizamos los mismos estilos
@@ -65,7 +65,7 @@ export const SenadoresTickerWidget = () => {
         {displayResults.map(partido => (
           <div key={partido.id} className="ticker-party">
             <div className="party-logo">
-              <ImageWithFallback src={partido.logoUrl || undefined} fallbackSrc="/default-avatar.png" alt={`Logo de ${partido.nombre}`} />
+              <ImageWithFallback src={partido.logoUrl || undefined} fallbackSrc={`${assetBaseUrl}/default-avatar.png`} alt={`Logo de ${partido.nombre}`} />
             </div>
             <div className="party-details">
               <div className="party-info">
diff --git a/Elecciones-Web/frontend/src/components/SenadoresWidget.tsx b/Elecciones-Web/frontend/src/components/SenadoresWidget.tsx
index cbec56c..81d1929 100644
--- a/Elecciones-Web/frontend/src/components/SenadoresWidget.tsx
+++ b/Elecciones-Web/frontend/src/components/SenadoresWidget.tsx
@@ -2,7 +2,7 @@
 import { useState, useEffect, useMemo } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import Select from 'react-select'; // Importamos react-select
-import { getMunicipios, getResultadosPorMunicipio, getConfiguracionPublica } from '../apiService'; // Usamos las funciones genéricas
+import { getMunicipios, getResultadosPorMunicipio, getConfiguracionPublica, assetBaseUrl } from '../apiService'; // Usamos las funciones genéricas
 import type { MunicipioSimple, ResultadoTicker } from '../types/types';
 import { ImageWithFallback } from './ImageWithFallback';
 import './TickerWidget.css';
@@ -97,7 +97,7 @@ export const SenadoresWidget = () => {
         {displayResults.map(partido => (
           <div key={partido.id} className="ticker-party">
             <div className="party-logo">
-              <ImageWithFallback src={partido.logoUrl || undefined} fallbackSrc="/default-avatar.png" alt={`Logo de ${partido.nombre}`} />
+              <ImageWithFallback src={partido.logoUrl || undefined} fallbackSrc={`${assetBaseUrl}/default-avatar.png`} alt={`Logo de ${partido.nombre}`} />
             </div>
             <div className="party-details">
               <div className="party-info">