Image doesn't appear in ReactJS

Question

I'm creating a mini project in React, I have an issue in the following code;

function Medwiki(props) {
    const medicines = [
        { name: 'Medicine A ', details: 'Details of Medicine A', image: '../assets/pngegg.png' },
        { name: 'Medicine B ', details: 'Details of Medicine B', image: 'https://thumbs.dreamstime.com/z/medicine-capsule-logo-vector-illustration-medicine-capsule-logo-file-format-can-be-scaled-to-any-size-141357083.jpg' },
        { name: 'Medicine C ', details: 'Details of Medicine C', image: 'https://example.com/medicineC.jpg' },
        { name: 'Medicine C',  details: 'Details of Medicine C', image: 'https://example.com/medicineC.jpg' },
        { name: 'Medicine C',  details: 'Details of Medicine C', image: 'https://example.com/medicineC.jpg' },
        { name: 'Medicine C',  details: 'Details of Medicine C', image: 'https://example.com/medicineC.jpg' },
        { name: 'Medicine C',  details: 'Details of Medicine C', image: 'https://example.com/medicineC.jpg' },
      ];
    return (
        <div>
        <div className="top-container">
        MedWiki
        <img src='https://thumbs.dreamstime.com/z/medicine-capsule-logo-vector-illustration-medicine-capsule-logo-file-format-can-be-scaled-to-any-size-141357083.jpg' alt="Logo" style={{ width: '10px', height: '10px' }}/>
        </div>
        <div className="medicine-container">
          {medicines.map((medicine, index) => (
            <div className="medicine-box" key={index}>
              <img src={medicine.image} alt={medicine.name} />
              <div className="medicine-name">{medicine.name}</div>
              <div className="medicine-details">{medicine.details}</div>
            </div>
          ))}
        </div>
      </div>
    );
  }

For Medicine A, the image doesn't appear, but for the web link it works as in Medicine B

the path for my .js file is src/files and for the image is /src/pngegg.png

What might be the issue?

Try to use this way: image: require('../assets/pngegg.png') – Andrew May 16 '23 at 18:23 — Andrew, May 16 '23 at 18:23

score 0 · Accepted Answer · answered May 16 '23 at 18:28

0

It might not be able to resolve the path of the image. I think you can give it a try with require('path/to/image/')

answered May 16 '23 at 18:28

Chirag Swadia

1,099
1
9
24

score 0 · Answer 2 · answered May 16 '23 at 18:31

0

I think you should use relative path relative to root directory for example "/src/assets/pngegg.png"

Check this question here Correct path for img on React.js

may give you more clear answers

answered May 16 '23 at 18:31

Arsany Benyamine

76
6

score 0 · Answer 3 · edited May 17 '23 at 14:07

0

I think that the issue is to use a relative path '../assets/pngegg.png'

Try a absolute path instead:

'https://{myprojectaddress}/assets/pngegg.png'

edited May 17 '23 at 14:07

Matteus Barbosa

2,409
20
21

answered May 16 '23 at 18:33

huzaifa rehman

1
1

score 0 · Answer 4 · answered May 16 '23 at 18:59

0

There is some differences using image in React. Please follow this post. https://levelup.gitconnected.com/display-images-in-react-8ff1f5b1cf9a?gi=6a512c107c6a Hope you this will be helpful to you.

answered May 16 '23 at 18:59

Nikola Jovanovic

18
4

Image doesn't appear in ReactJS

4 Answers4