Photo Not Showing Up Bootstraph 5

Question

I'm currently making a website and am trying to put a picture within a column. On the left, there is some text. The website only displays a broken image:

This is my code so far:

import React from "react";

function Home() {
  return (
    <div className="home">
      <div class="container">
        <div class="row align-items-center mb-2">
          <div class="col-lg-5 my-5">
            <h1 class="font-weight-light ">Home</h1>
            <p>redacted</p>
          </div>
          <div class="col-lg-7 my-5">
            <img src="/Users/megan/meganwebsite/src/components/20220502_144614.jpg" alt="photo" class="rounded float-end img-fluid"/>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Home;

Answer 1

You can change with a way:

import image from './src/components/20220502_144614.jpg'

<img src={image} alt="photo" class="rounded float-end img-fluid"/>