CODEWITHSUNDEEP
reactjsexpress
Illyrian
Illyrian

Reputation: 549

Image stored in express not displayed in React img component

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

Upvotes: 0

Views: 115

Answers (2)

ghostCommander
ghostCommander

Reputation: 376

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();
});

Upvotes: 1

Illyrian
Illyrian

Reputation: 549

Solution:

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

crossorigin="anonymous"

Upvotes: 0

Related Questions