title: Javascript Require Image vs Import
body: <p>I have the following code:</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 styled from "styled-components";
  
  import avatar from './assets/images/2020-avatar.png'
  
  function App() {
    return (
        &lt;Container&gt;
          &lt;Avatar src={avatar} /&gt;
          &lt;Medium src={require("./assets/images/medium_512.png")} /&gt;
        &lt;/Container&gt;
      );
    }
  
  const Container = styled.div`
    position: relative;
    display: flex;
  `;
  ;
  
  const Avatar = styled.img`
    top: 120px;
    width: 200px;
    height: 200px;
    position: absolute;
    left: 583px;
    object-fit: contain;
  `;
  
  const Medium = styled.img`
    top: 475px;
    left: 475px;
    width: 150px;
    height: 150px;
    position: absolute;
    object-fit: contain;
  `;
  
  
  export default App;</code></pre>
  </div>
  </div>
  </p>
  <p>All of the references I've seen regarding the <code>require()</code> statement should work for the <code>medium_512.png</code> image, but it shows as a broken image. Only the imported <code>avatar</code> image works.</p>
  <p>Wondering what I'm doing wrong here and why all the examples I've seen using require I have similar syntax, but obviously something is wrong.</p>