Broken icon displayed instead of Image with alt text - React

Question

I created a React app using npx create-react-app and I've an image called image.jpg located at src -> images -> image.jpg. I want to display an image with every employee but having some problem with image(s). My code is running well but the image does not show up instead on saving and loading the application, the image doesn't display but broken icon is displayed with alt text. How can I solve this problem? Am I storing my image at wrong place or Is there some logical error in my code?

Here's what I tried:

import React from "react";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      term: "",
      names: [
        { name: "Deepak", job_profile: "Quality Analyst", description: "He is Passionate in Tester" },
        { name: "Deepinder", job_profile: "iOS Developer", description: "He is a Dedicated iOS Developer" }
      ],
      filteredData: [{}]
    };
  }

  render() {
    let terms = "";
    if (this.state.term) {
      terms = this.state.term.toLowerCase();
    }
    return (
      <div className="App">
        <label>Search Employee: </label>
        <input
          type="text"
          value={this.state.term}
          id="searchEmp"
          placeholder="Enter Name"
          onChange={(event) => {
            if (event.target.value.indexOf(" ") > -1) {
              alert("Please don\'t enter space.");
              this.setState({ term: "" });
              return;
            }
            this.setState({ term: event.target.value });
          }}
        />
        <br />
        <br />

        {this.state.names &&
          this.state.names
            .filter((x) => x.name.toLowerCase().startsWith(terms) || (x.description.toLowerCase().includes(terms)))
            .map((item) => {
              return (
                <div className="data-body">
                  <div>Name : {item.name}</div>
                  <div>Job Profile : {item.job_profile}</div>
                  <div>Description : {item.description}</div>
                  <div><img src={require('../src/images/image.jpg')} alt="profile_picture" /></div>
                  <input type="button" id="button" 
                  value="Delete" onClick={() => {
                  this.setState
                  ({ names: this.state.names.filter
                  (i => i.name !== item.name) });
                  }}/>
                  <div>{<br></br>}</div>
                </div>
              );
            })}
          </div>
          );
        }
}
export default App;

Output:

Answer 1

This is the stupidest thing but after hours of testing both on localhost and the hosted build on AWS Amplify. But I was using a .jpeg file and I re-exported the photo as a png and it solved. my issue.

Now I am pulling the image in through 2 different ways:

import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
// import Image from 'react-bootstrap/Image'

import '../css/about.css';
import profilePicture from '../images/profile-picture.png'
import { BsCode } from "react-icons/bs";


const About = () => {

  return (
    <Row className='section'>
      <Col id="about" xs={11} sm={11} md={9} xl={7}>
        <Row id="about-row">
          <Col xs={12} md={8}>
            <h3 id='about-description'>I am an engineer who's passion for many art forms has led me to create visually influenced web applications. These often manifest themselves through data-driven analytics and intuitive graphics.</h3>
            <h6 id='about-technical'>main techincal interests</h6>
            <div id='about-skills'>
              <span><BsCode className='about-skills-icon'/>Python</span>
              <span><BsCode className='about-skills-icon'/>React</span>
              <span><BsCode className='about-skills-icon'/>Javascript</span>
              <span><BsCode className='about-skills-icon'/>NodeJS</span>
              <span><BsCode className='about-skills-icon'/>R</span>
              <span><BsCode className='about-skills-icon'/>Git</span>
            </div>
            <p id='about-resume'>for more skills, checkout out my <a id='about-resume-link' href='https://drive.google.com/file/d/1UFBZjwpirNNVCuxiPMb0rGs2dQqCP0RE/view?usp=sharing'>resume</a></p>
          </Col>
          <Col xs={6}  md={4}>
            {/* image found in the ./src/images/<filename>.png */}
            <img id='about-profile' src={profilePicture} alt='about-profile'/>
            {/* image found in the ./public/images/<filename>.png */}
            <img id='about-profile' src='./images/profile-picture.png' alt='about-profile'/>
          </Col>
        </Row>
      </Col>
    </Row>
  )
}

export default About

Answer 2

just created the app using your code it worked just check this

<img src={require("./images/logo.png")}  alt="profile_picture" />

my folder structure is like

├── public
├── src
│   ├── images
│   │        ├── logo.png
│   │
│   ├── index.js
  

also If the images are inside the src/assets folder you can use require with the correct path in the require statement, and it also worked for me

const userImage = require('./images/logo.png');

<img src={userImage}  alt="profile_picture" />

this approch also worked

import userImage from'./logo.png';

Answer 3

Try this,

   import React from "react";
    
    class App extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          term: "",
          names: [
            { name: "Deepak", job_profile: "Quality Analyst", description: "He is Passionate in Tester" },
            { name: "Deepinder", job_profile: "iOS Developer", description: "He is a Dedicated iOS Developer" }
          ],
          filteredData: [{}]
        };
      }
    
      render() {
        let terms = "";
        if (this.state.term) {
          terms = this.state.term.toLowerCase();
        }
        return (
          <div className="App">
            <label>Search Employee: </label>
            <input
              type="text"
              value={this.state.term}
              id="searchEmp"
              placeholder="Enter Name"
              onChange={(event) => {
                if (event.target.value.indexOf(" ") > -1) {
                  alert("Please don\'t enter space.");
                  this.setState({ term: "" });
                  return;
                }
                this.setState({ term: event.target.value });
              }}
            />
            <br />
            <br />
    
            {this.state.names &&
              this.state.names
                .filter((x) => x.name.toLowerCase().startsWith(terms) || (x.description.toLowerCase().includes(terms)))
                .map((item) => {
                  return (
                    <div className="data-body">
                      <div>Name : {item.name}</div>
                      <div>Job Profile : {item.job_profile}</div>
                      <div>Description : {item.description}</div>
                      <div><img src={require("./images/image.jpg")} alt="profile_picture" /></div>
                      <input type="button" id="button" 
                      value="Delete" onClick={() => {
                      this.setState
                      ({ names: this.state.names.filter
                      (i => i.name !== item.name) });
                      }}/>
                      <div>{<br></br>}</div>
                    </div>
                  );
                })}
              </div>
              );
            }
    }
    export default App;