I have a react component that is mean to render an image. Withing the functional component, I am passing in the images relative path from the file. I want to simple render the image in the url browser. I did read that I should be using require. When I try to render it, it shows that the image is not there and the empty image icon. I am not sure what else to do. here is my component.

import React from 'react'

export default function PropertyImage({ image }) {
  console.log(image)
  return (
    <div>
      <img src={require(image)}/>
    </div>
  )
}

I have also tried:

export default function PropertyImage({ image }) {
  console.log(image)
  return (
    <div>
      <img src={image}/>
    </div>
  )
}

This is the relative path that I have which is what image shows in the console.log:

../images/unnamed.jpeg

Here is the file structure.

File Structure