CODEWITHSUNDEEP
javascriptreactjs
user15299728
user15299728

Reputation:

How to add an image in React JS

I have a code using 'array of objects' that showing employees with details. I want to upload their images also. So where do I need to keep images(their path) in my ReactApp or I can upload from laptop's hard drive directly. What will be the code to upload an image for every single employee.

Here is my code below:

import React from "react";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      term: "",
      names: [
        { name: "Deepak", age: 25, profile: "Developer" },
        { name: "Deepika", age: 24, profile: "Designer" },
        { name: "Deepinder", age: 22, profile: "Tester" }
      ],
      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))
            .map((item) => {
              return (
                <div className="data-body">
                  <div>Name = {item.name}</div>
                  <div>Job Profile = {item.job_profile}</div>
                  <div>Description = {item.description}</div>
                  <input type="button" id="button" value="Delete"/>
                  <div>{<br></br>}</div>
                </div>
              );
            })}
      </div>
    );
  }
}
export default App;

Upvotes: 0

Views: 13231

Answers (3)

Melissa Crumpler
Melissa Crumpler

Reputation: 1

I know this answer is super late, but i noticed when copying products to live mode, the price_id changes. The test price id isn't the same as the live "price_1DFJnnDBHhdk17638". Hope this helps.

Upvotes: 0

OBN
OBN

Reputation: 371

There are a few options here:

1. Import

To import an image into a React App you can use for example:

import myImage from '../images/myImage.jpg'

And then reference this with:

<img src={myImage}></img>

2. Require

<img src={require('../images/myImg.jpg')}></img>

3. Object

function importAll(r) {
  return r.keys().map(r);
}

Make Object of all image paths:

const images = importAll(require.context('./', false, /\.(png|jpe?g|svg)$/));

Require it

<img src={images['myImg.png']} />

Upvotes: 2

Om Fuke
Om Fuke

Reputation: 662

create images folder in your app then put your images with a particular name and create another key value pair in names such as

names = [{name:"deepak", age:25, image:"./location of the image...}"}]

then put img tag <img src={require('./logo.jpeg')} />

here logo.jpg should be ${item.image}

if this is not working check this how to refrence local image

Upvotes: 0

Related Questions