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 Brand logo, 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 <img /> tag in my react-app does not render the image correctly.
To upload files, I'm using express-fileupload library.
Here are my configs and code:
app.js
...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')));
client.routes.js
...other routes
clientRouter.post('/clientes/logos/upload', uploadLogoImg);
client.controller.js
...other controller functions
export const uploadLogoImg = async (req, res) => {
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',
});
}
};
For my frontend I'm using vite/react app, rendering an <img/> tag with logoUrl in src attribute, see images below:
Image file uploaded to server:
Image requested from URL in browser:
Image rendered in <img/> tag on react mui-datatable (the first 2 images for other brands come from the official web of the brand):
<img/> tag on rendered HTML:
I don't know what I'm doing wrong, please help, thanks in advance.
