Using in image tag in react with a image url imported from a json file

Question

I'm trying to make a simple blog page where I can read the blogs from a JSON file, and then proceed to upload them to the site.

Blog.jsx

import React from 'react'
import BYFDC from '../global/BYFDC'
import blogs from './Blogs.json'

function Blog() {
  return (
    <div className='mt-[15vh]'>
        <div>
            <h1 className='text-4xl text-center items-center justify-center flex py-16 text-[#398492]'>
                YourCareerStrategy Blog
            </h1>
            <div className='flex items-center justify-center'>
              <img src={require(`${blogs[0].image}`)} alt='Blog' />
              <h1 className='text-center items-center justify-center flex py-16 '>
                {blogs[0].name} 
              </h1>
            </div>
            <div>
              <BYFDC />
            </div>
        </div>
    </div>
  )
}

export default Blog

Blogs.json

[
    {
        "id": 3,
        "name": "Blog Three",
        "desc": "A little description for blog three",
        "image": "../../assets/images/Eli.png"
    },
    {
        "id": 2,
        "name": "Blog Two",
        "desc": "A little description for blog two",
        "image": "../../assets/images/Eli.png"
    },
    {
        "id": 1,
        "name": "Blog One",
        "desc": "A little description for blog one",
        "image": "../../assets/images/Eli.png"
    }
]

I've tried many things to get the <img src={require(`${blogs[0].image}`)} alt='Blog' /> to actually display an image, but nothing seems to work. Some stuff break the whole page, others make it go to the alt text... regardless, it never works. Keep in mind I know I can import the image in the file or whatever, I just want to make it so I can edit the json file, and thats all the work i need to do to make a new blog, so I dont want imports for images inside the jsx file.

I tried using <img src={require(`${blogs[0].image}`)} alt='Blog' /> <img src={require(blogs[0].image)} alt='Blog' /> <img src={require(blogs[0].image).default} alt='Blog' /> <img src={blogs[0].image} alt='Blog' /> <img src={`${blogs[0].image}`} alt='Blog' />

I think a few more, thats what I could remember