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;

3 Answers3

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']} />
OBN
  • 371
  • 2
  • 12
  • @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? –  Mar 01 '21 at 10:01
  • 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: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#importing_features_into_your_script – OBN Mar 01 '21 at 10:18
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

Om Fuke
  • 482
  • 1
  • 7
  • 14
  • @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. –  Mar 01 '21 at 09:49
  • you have to put it manually in that folder and follow these procedure given in answer – Om Fuke Mar 01 '21 at 10:04
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.

Melissa Crumpler
  • 1
  • 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](/help/how-to-answer). – Community Jul 26 '23 at 16:08