title: Convert local img to base64 with react hooks
body: <p>I am in React hooks trying to utilise code in this question  <a href="https://stackoverflow.com/questions/32833797/convert-local-image-to-base64-string-in-javascript">Stackoverflow question</a>- but, as I think someone is pointing out, there are problems implementing this in a local environment.</p>
  
  <p>I have a variable containing my src path:</p>
  
  <pre><code>import avatar from '../../Assets/Photos/avatar.png'
  </code></pre>
  
  <p>Then I try to set the photo as a useState state:</p>
  
  <pre><code> const [ photo, setPhoto ] = useState(avatar)
  </code></pre>
  
  <p>Then I use useEffect to wait until the variable has loaded:</p>
  
  <pre><code>useEffect(() =&gt; {
      if (photo) {
          console.log("PHOTO EXISTS!!!!!!!!!!!!!!", photo)
          console.log(convertImgToBase64())
  
      }
  }, [photo])
  </code></pre>
  
  <p>And the convertImgToBase64 function is almost identical to the one in the question I referenced:</p>
  
  <pre><code>    function convertImgToBase64()
  {
      var canvas = document.createElement('CANVAS');
      let img = document.createElement('avatar');
      img.src = photo;
      img.onload = function()
      {
          canvas.height = img.height;
          canvas.width = img.width;
          var dataURL = canvas.toDataURL('image/png');
  
          canvas = null;
          return dataURL
      };
  }
  </code></pre>
  
  <p>This returns undefined - why is this please?</p>