0

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;
Improve this question

3 Answers 3

Reset to default
2

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']} />
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

@OBN-i would like to use 1st option but what I don't know is that what to do prior to import 'this' from 'path'. I think I'm not able to setting up path for images. Could you please help?
You can import your images from wherever you like on your local hard drive. However I suggest you store all the images you need for this project in a directory within your project file structure. Lets say ./images/. The syntax for this path is explained here: developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/…
0

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

Improve this answer

2 Comments

@OmFuke-by using your refrence I created a 'images' folder under 'src'. Now if I'm not wrong all I need to put images in this folder. If I'm right then how do I have to store images in this particular location? As I'm attempting this for the first time and not getting how to proceed further.
you have to put it manually in that folder and follow these procedure given in answer
0

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.

Improve this answer

1 Comment

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.