Image stored in express not displayed in React img component-CodePudding

Backend

app.use("/uploads", express.static("./server/uploads"));

index.js
server
---uploads
------16562777154317mbc3jbenz.png

Backend folder structure

I want to access it by URL in chrome: http://localhost:4500/uploads/16562777154317mbc3jbenz.png It works.

Image opens in the web browser by URL

Frontend

<img src="http://localhost:4500/uploads/16562777154317mbc3jbenz.png" alt="Test" style="height: 200px; object-fit: cover;">

The image does not display.

Image does not display

CodePudding user response：

You can use these codes at back-end

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  res.header("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
  next();
});

CodePudding user response：

Solution:

add this on img component, since they are two different sources

crossorigin="anonymous"