CODEWITHSUNDEEP
javascriptreactjs
user15299728
user15299728

Reputation:

Broken icon is displayed for the image with alt text

I have an image called image.jpg inside the src -> images -> image.jpg. I have some problem with my image on my React app. My code is running well but the image does not show up instead on saving and loading the application, the image is not displayed but broken icon is displayed with alt text. How is it possible to solve this problem?

What I have tried is:

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;

Upvotes: 0

Views: 431

Answers (2)

Banny
Banny

Reputation: 111

i hope this helps you

<div>
 <img src='../src/images/image.jpg' alt="profile_picture" />
</div>

Upvotes: 0

Near
Near

Reputation: 447

I assume that you are using create-react-app to bundle your project. If that is the case, you just need to put all your images in the public folder and just mention the name in the src attribute.

You don't need the require function while mentioning the source of an image.

So, your code should look like this:

<img src="image.jpg" alt="profile_picture"/>

If you want the image to reside in some part of your source directory, you can import the image from there and use it in your code as follows:

import Image from '../images/image.jpg'
<img src={Image} alt="profile_picture"/>

Edit

Using ES5 syntax, you could do the following:

const Image = require("../images/image.jpg")
<img src={Image} alt="profile_picture"/>

Upvotes: 2

Related Questions