how do I load images from a js file from a folder in the same path?

Question

These are 4 JSX files I am using in react and they are all in the same path inside of a src directory. As you can see I am trying to attach a string to the imc src inside of avartar.jsx to display an image, and eventually assigning it to the picture file from the exersises.js file. All I am getting in place of the image is the alt text. Does react.js allow you being able to get path strings to put as img src's? APP.JSX

function createCard(content) {
  return (
    <Card
      key={content.id}
      name={content.name}
      img={content.picture}
      tel={content.description}
      email={content.muscleGroup}
    />
  );
}

function App() {
  return (
    <div>
      <h1 className="heading">Exercises</h1>
      {defaults.map(createCard)}
    </div>
  );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Card.JSX

import React from "react";
function Card(props) {
  return (
    <div className="card">
      <div className="top">
        <h2 className="name">{props.name}</h2>
        <Avatar img={props.img} />
      </div>
      <div className="bottom">
        <Detail detailInfo={props.tel} />
        <Detail detailInfo={props.email} />
      </div>
    </div>
  );
}
export default Avatar;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Avatar.jsx

import React from "react";

function Avatar(props) {
  return <img className="circle-img" src={props.img} alt="avatar_img" />;
}

export default Avatar;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

const ggSchema = new mongoose.Schema({
  name: {
    type: String,
    required: [1, "Needs a name"]
  },
  description: String,
  picture: String,
  musclegroup: String,
  reps: String,
  equipment: String,
  embedded: String,
  selected: Boolean
});

const Exercise = mongoose.model("Exercise", ggSchema);
const benchPress = new Exercise({
  name: "Bench Press",
  description: "Extend arms upward with barbell while lying on the bench.",
  picture: "benchPress.png",
  musclegroup: "Upper",
  reps: "3x12",
  equipment: "Gym",
  embedded: "https://www.youtube.com/watch?v=gRVjAtPip0Y",
  selected: 0
});

const defaults = [
  benchPress];
  export default defaults;

export default Card;