my image is not showing up ReactJS Template component - reactjs

Question

I am making a news section for my website. I am using a react template that will receive data from a "Data" file then reinsert it into the file that is put into my app.js file. Everything works except for the fact that the image I am using does not work and defaults to it's alt text. below is the code for all files involved.
This is the template code
import React from 'react'
import './News.css'
function NewsContentTemplate ({
title,
date,
content,
img,
imgStart,
alt,
}) {
return (
<>
<div className='nct-container'>
<div className='row content-container'
style={{display: 'flex',
flexDirection:
imgStart === 'start' ? 'row-reverse' : 'row',
}}>
<div className='col'>
<div className='content-text-wrapper' >
<h2 className='content-date'>{date}</h2>
<h2 className='content-title'>{title}</h2>
<p className='news-content'>{content}</p>
</div>
</div>
<div className='col'
style={{
display: 'flex',
justifyContent:
imgStart === 'start' ? 'flex-end' : 'flex-start'}}>
<img src={img} alt={alt} className="news-img" />
</div>
</div>
</div>
</>
)
}
export default NewsContentTemplate
This is the "Data" file that passes information into the template. The image is being taken from an "images" folder in the public folder of my app.
export const jun302022 = {
imgStart: '',
title: 'Title',
date: '6-30-2022',
content:
'content',
img: './images/logo192.png',
alt: 'alt text'
}
This is the code that imports the template and passes it to app.js
import React from 'react'
import Content from '../../NewsContentTemplate'
import {
jun302022,
} from './Data'
function News () {
return (
<>
<div className='news-container' id='news'>
<h1 className='news-section-title'>
News
</h1>
<Content {...jun302022}/>
</div>
</>
)
}
export default News
the code should look like This but ends up looking like This
Thank you.