Question 169768 in Javascript Question posted in
A very good W3school tutorial can be found here.

Why isn’t the image showing in ReactJS?

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?

Tags:

3

Answers


  1. 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/')

    Login or Signup to reply.
  2. 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

    Login or Signup to reply.
  3. 0

    I think that is the issue
    ‘../assets/pngegg.png’

    Try a relative path

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search