<img
        src={siswa.url}
        alt={`Profile of ${siswa.nama1}`}
        className={styles.image}
        onError={(e) => {
          console.error("Image failed to load:", e.target.src);
          e.target.style.display = "none"; // Hide the broken image
        }}
      />

on the console chrome it say failed to load and also when I browse the link it say Cannot GET /images/e45c416f7e189371d42a196f2bacf989.jpg

      <img
        src={siswa.url}
        alt={`Profile of ${siswa.nama1}`}
        className={styles.image}
        onError={(e) => {
          console.error("Image failed to load:", e.target.src);
          e.target.style.display = "none"; // Hide the broken image
        }}
      />

on the console chrome it say failed to load and also when I browse the link it say Cannot GET /images/e45c416f7e189371d42a196f2bacf989.jpg

• javascript
• reactjs
• image

Share Improve this question Follow edited Mar 2 at 9:25 qowi asked Mar 2 at 9:24 qowiqowi 122 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

/images/e45c416f7e189371d42a196f2bacf989.jpg 

This looks like a relative path. You can try to use an absolute image path(full root path of the image on your machine) to see if the issue is caused by your image path; If the problem still exists, check if your backend server is setup serve static files