title: svg image not showing on react.js
body: <p>I have been following a YouTube tutorial for making a website using react.js.</p>
  <p><strong>index.js</strong>:</p>
  <pre><code>import { Img, ImgWrap } from './InfoElements';
  
  const InfoSection = ({ img, alt)} =&gt; {
       return(
              &lt;&gt;
                &lt;ImgWrap&gt;
                   &lt;Img src={img} alt={alt}/&gt;
                 &lt;/ImgWrap&gt;
              &lt;/&gt;
             )
  }
  export default InfoSection
  </code></pre>
  <p>I have been exporting image src from another folder named Data.js</p>
  <p><strong>Data.js</strong>:</p>
  <pre><code>export const homeObjOne = {
     img: require(&quot;../../images/svg-1.svg&quot;),
     alt: 'error404'
  }
  </code></pre>
  <p>I used styled-components for style</p>
  <p><strong>InfoElements.js</strong>:</p>
  <pre><code>export const ImgWrap = styled.div`
      max-width: 555px;
      height: 100%;
  `;
  
  export const Img = styled.img`
      width: 100%;
      margin: 0 0 10px 0;
      padding-right: 0;
  `;
  </code></pre>
  <p>Here image is placed on</p>
  <p>src-&gt;images-&gt;svg-1.svg</p>
  <p>I tried using other images like jpe, jpg and png rather than svg but still its not working. The image is not showing on background.</p>
  <p>Here is the <strong>picture the way image return</strong>:</p>
  <p><a href="https://i.stack.imgur.com/Pwaww.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Pwaww.png" alt="enter image description here" /></a></p>
  <p>Here is the <strong>path of image folder</strong>:</p>
  <p><a href="https://i.stack.imgur.com/lKMzP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lKMzP.png" alt="enter image description here" /></a></p>
  <p>I have been tried all other image format and result is same..Is their anything I done wrong</p>