How to show the images of card components that exist outside the src folder in ReactJs?

Question

I have a react app which integrated with FastAPI and MongoDB. In my project, there is a page to show some information as cards. These cards contain images, but those images are generated automatically in the backend folder. Each card contains the path of its own picture, but when I call this path in the component, it doesn't show the picture as illustrated in the picture 1. Note: I used React component class format to build my project!

enter image description here

Here is how each card is generated:

    renderCard(card, index) {
    return (
      <Card key={index} className="box">
        <Card.Img className="bodyImg" variant="top" src={card.coverPic} />
        <Card.Body className="bodytext">
          <Card.Title>{card.name}</Card.Title>
          <Card.Text>{card.Placename}</Card.Text>
          <Card.Text>{card.setting}</Card.Text>
          <Link
            to={{
              pathname: "/CardInfo",
              state: card,
            }}
            style={{ textDecoration: "none" }}
            className="buttonStyle"
          >
            Show
          </Link>
        </Card.Body>
      </Card>
    );
  }

Here is the information for two cards:

First card:

{
  "_id": {
    "$oid": "60fd0c3b3d4412b25bea49e7"
  },
  "name": "Test the coverPic",
  "path": [
    "C:/Users/Asma/Desktop/Projects/backend/app/videos/HaramCovid2.mp4"
  ],
  "Placename": "Makkahh",
  "setting": "Public Place",
  "country": "Saudi Arabia",
  "duration": "1",
  "date": "2021-06-29",
  "sendEmail": true,
  "publish": true,
  "outputVideoPath": "output/Test the coverPic.avi",
  "contactRate": 1,
  "userId": "60fbffa2e7db6bc44a842ea6",
  "framesPath": "C:/Users/Asma/Desktop/Projects/backend/app/videos/output/",
  "coverPic": "C:/Users/Asma/Desktop/Projects/backend/app/videos/output/Test the coverPic-30.png"
}

Second card:

{
  "_id": {
    "$oid": "60fc79bbac4f82a891c01ef2"
  },
  "name": "testing",
  "path": [
    "C:/Users/Asma/Desktop/Projects/backend/app/videos/HaramCovid2.mp4"
  ],
  "Placename": "Haram",
  "setting": "Mass Gathering",
  "country": "Åland Islands",
  "duration": "1",
  "date": "2021-07-02",
  "sendEmail": false,
  "publish": false,
  "outputVideoPath": "output/testing.avi",
  "contactRate": 1,
  "userId": "60fc79a0ac4f82a891c01ef1",
  "framesPath": "C:/Users/Asma/Desktop/Projects/backend/app/videos/output/",
  "coverPic": "output/testing-30.png"
}

Move pictures to one folder which exist in projects folder will solve the problem. For instance move pictures to /src/images. Try out this link: https://stackoverflow.com/questions/39999367/how-do-i-reference-a-local-image-in-react — Majid M., Jul 25 '21 at 07:38

movcmpret · Answer 1 · 2021-07-25T07:47:55.763

AFAIK you cannot use files from outside the src folder. I guess that has some security reasons. You could try to create a symlink or hardlink. It's a link to another file or directory that can be created inside your src folder.

Open a cmd window and navigate to the folder of your choice inside your src folder, e.g. images.

Execute mklink /h HaramCovid2.mp4 "C:/Users/Asma/Desktop/Projects/backend/app/videos/HaramCovid2.mp4" to create a hard link.

JSON:

  "path": ["./images/picture1"],

EDIT: Changed the mklink command. Please try this one.

How to show the images of card components that exist outside the src folder in ReactJs?

1 Answers1