title: react app does not show images from express api
body: <p>I'm using a node/express API to store users/clients, in one of the functionalities I need to upload an image to set the <code>Brand logo</code>, the image uploads well, and the image URL response is correct, if I put the image URL in browser load and shows perfect, but the <code>&lt;img /&gt;</code> tag in my react-app does not render the image correctly.</p>
  <p>To upload files, I'm using <code>express-fileupload</code> library.</p>
  <p>Here are my configs and code:</p>
  <p><code>app.js</code></p>
  <pre class="lang-js prettyprint-override"><code>...imports and other things
  //settings
  app.set('port', config.port);
  const __filename = fileURLToPath(import.meta.url);
  const __dirname = path.dirname(__filename);
  
  //middlewares
  app.use(cors());
  app.use(
      fileupload({
          createParentPath: true,
      })
  );
  app.use(helmet());
  app.use(morgan('dev'));
  app.use(express.json());
  app.use(express.urlencoded({ extended: false }));
  app.use(i18n.init);
  app.use(express.static(path.join(__dirname, 'public')));
  </code></pre>
  <p><code>client.routes.js</code></p>
  <pre class="lang-js prettyprint-override"><code>...other routes
  clientRouter.post('/clientes/logos/upload', uploadLogoImg);
  </code></pre>
  <p><code>client.controller.js</code></p>
  <pre class="lang-js prettyprint-override"><code>...other controller functions
  export const uploadLogoImg = async (req, res) =&gt; {
      try {
          if (!req.files) {
              return res.status(400).json({
                  error: 'No se ha seleccionado ninguna imagen',
              });
          } else {
              const logo = req.files.logo;
              const appURL = config.appURL;
  
              await logo.mv(`./src/public/uploads/logos/${logo.name}`);
  
              return res.status(200).json({
                  success: 'Imagen subida correctamente',
                  logoUrl: `${appURL}/uploads/logos/${logo.name}`,
              });
          }
      } catch (error) {
          return res.status(500).json({
              error:
                  error.message ||
                  'Ha habido un error subiendo la imagen, contacte con el administrador',
          });
      }
  };
  </code></pre>
  <p>For my frontend I'm using vite/react app, rendering an <code>&lt;img/&gt;</code> tag with <code>logoUrl</code> in src attribute, see images below:</p>
  <p>Image file uploaded to server:</p>
  <p><a href="https://i.stack.imgur.com/FGOWZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FGOWZ.png" alt="Image uploaded to server folder" /></a></p>
  <p>Image requested from URL in browser:</p>
  <p><a href="https://i.stack.imgur.com/7DGVU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7DGVU.png" alt="browser image" /></a></p>
  <p>Image rendered in <code>&lt;img/&gt;</code> tag on react mui-datatable (the first 2 images for other brands come from the official web of the brand):</p>
  <p><a href="https://i.stack.imgur.com/ufv9k.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ufv9k.png" alt="logo IMG on front" /></a></p>
  <p><code>&lt;img/&gt;</code> tag on rendered HTML:</p>
  <p><a href="https://i.stack.imgur.com/FsjpF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FsjpF.png" alt="img tag rendered" /></a></p>
  <p>I don't know  what I'm doing wrong, please help, thanks in advance.</p>