Unable to display photo in react create app project

Question

I can't view the photos in my project that I created with create react app. please help me..

<img id="2" src={require('../../../img/logo.png')} className="img-fluid" alt="logo"/>

the file path is absolutely correct.

package.json:

{
  "name": "e-ticaret-react-ui",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.15.0",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "axios": "^0.24.0",
    "bootstrap": "^5.1.3",
    "jquery": "^3.6.0",
    "react": "^17.0.2",
    "react-bootstrap-icons": "^1.6.1",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.6",
    "react-router-dom": "^5.3.0",
    "react-scripts": "4.0.3",
    "redux": "^4.1.2",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

A photo was displayed in the React project created by Visual Studio. Photos are not displayed in the project I created with create react app in vs code. The file structure is exactly the same. the folder paths are correct.

add your image inside the public folder (or create an images folder in public and add your image in it ). in your <img> tag use <img src="/images/your_img.png" /> — Sojin Antony
– Sojin Antony, Commented Nov 3, 2021 at 12:45
@kiranvj thanks. it worked. So why do we need to write "default"? — maria
– maria, Commented Nov 3, 2021 at 12:48
Does this answer your question? How to import image (.svg, .png ) in a React Component — Dmitriif
– Dmitriif, Commented Nov 3, 2021 at 12:59

Pan Vi · Accepted Answer · 2021-11-03 12:59:58Z

0

Try this:

At the top of your file with your imports use this line:

import Logo from '../../../img/logo.png';

And then your img would look like this:

<img id="2" src={ Logo } className="img-fluid" alt="logo"/>

edited Nov 3, 2021 at 12:59

Pan Vi

6776 silver badges19 bronze badges

answered Nov 3, 2021 at 12:44

Shaded

1571 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

maria Over a year ago

Since I call all the photos with the require method, a solution is needed accordingly. but adding ".default" to the end of require fixed it. anyway thanks for your solution

rnewd_user · Accepted Answer · 2021-11-03 13:08:26Z

0

Create a folder calls assets then put on their images inside, like this:

import Logo from '../../assets/logos/logo.png';

<img id="2" src={ Logo } className="img-fluid" alt="logo"/>

answered Nov 3, 2021 at 13:08

rnewd_user

1,72215 silver badges17 bronze badges

Collectives™ on Stack Overflow

Unable to display photo in react create app project

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related