React-getting alt text in same react component while rendering through two different ways. while image loads through one way but fails through other

Nawaz Shareef 0
Viewed 9
<div className="tasklist">
  <p>{props.task.task}</p>
  <small>{new Date(props.task.createdAt.toString()).toDateString()}</small>
  <br />
  <i>Assigned By :</i>
  <b>{props.task.assigned_by}</b>
  <br />
  <i>Assigned to :</i>
  <b>{props.task.assigned_to}</b>
  <br />
  <i>status :</i>
  <b>{props.task.status}</b>
  <button onClick={showUpdateFormhandler}>
    <img
      onError={()=>{console.log('error occured')}}
      src="edittask.png"
      alt="update"
      style={{ width: "20px", height: "20px" }}
    />
  </button>
</div>

The same div is rendering image perfectly in listing tasks but when Iam using this div from users component it isn't loading. I have added css and image is in public folder. This is my first project in react. a task assigning app.

render components image reactjs css
1 Answers

As you stated, that your image isn't loading when you render it from user component. The most possible reason for this could be the path of source of image. The path may be changing considering that you have Users component in a different directory.

It is not easy to predict the accurate error unless I look at entire repository but I think you most probably have the source path error.Try changing the src of the image to correct source when you're rendering it from Users Component

Also , please read minimal reproducable example

userwLAe10
Related