title: my image is not showing up ReactJS Template component
body: <p>I am making a news section for my website. I am using a react template that will receive data from a &quot;Data&quot; 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.</p>
  <p>This is the template code
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react'
  import './News.css'
  
  function NewsContentTemplate ({
    title,
    date,
    content,
    img,
    imgStart,
    alt,
  }) {
  
    return (
      &lt;&gt;
        &lt;div className='nct-container'&gt;
          &lt;div className='row content-container'
            style={{display: 'flex',
            flexDirection:
            imgStart === 'start' ? 'row-reverse' : 'row',
          }}&gt;
  
            &lt;div className='col'&gt;
              &lt;div className='content-text-wrapper' &gt;
                &lt;h2 className='content-date'&gt;{date}&lt;/h2&gt;
                &lt;h2 className='content-title'&gt;{title}&lt;/h2&gt;
                &lt;p className='news-content'&gt;{content}&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
  
            &lt;div className='col'
              style={{
                display: 'flex',
                justifyContent:
                imgStart === 'start' ? 'flex-end' : 'flex-start'}}&gt;
              &lt;img src={img} alt={alt} className="news-img" /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/&gt;
    )
  }
  
  export default NewsContentTemplate</code></pre>
  </div>
  </div>
  </p>
  <p>This is the &quot;Data&quot; file that passes information into the template. The image is being taken from an &quot;images&quot; folder in the public folder of my app.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>export const jun302022 = {
    imgStart: '',
    title: 'Title',
    date: '6-30-2022',
    content:
      'content',
    img: './images/logo192.png',
    alt: 'alt text'
  }</code></pre>
  </div>
  </div>
  </p>
  <p>This is the code that imports the template and passes it to app.js</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react'
  import Content from '../../NewsContentTemplate'
  import {
    jun302022,
    } from './Data'
  
  function News () {
  
    return (
      &lt;&gt;
        &lt;div className='news-container' id='news'&gt;
          &lt;h1 className='news-section-title'&gt;
            News
          &lt;/h1&gt;
          &lt;Content {...jun302022}/&gt;
        &lt;/div&gt;
      &lt;/&gt;
    )
  }
  
  export default News</code></pre>
  </div>
  </div>
  </p>
  <p>the code should look like <a href="https://i.stack.imgur.com/P9zlb.png" rel="nofollow noreferrer">This</a> but ends up looking like <a href="https://i.stack.imgur.com/HO4Qj.png" rel="nofollow noreferrer">This</a></p>
  <p>Thank you.</p>