title: I am importing local images then exporting them to be rendered with .map() but they aren't loading
body: <p>I want to make an Image slider for a web app I am working on, but the images don't seem to be loading / displaying when I use local images, if I add the source as a link, it works fine.</p>
  <p>Here are the 3 components I have so far:</p>
  <p><strong>Component 1:</strong> <em>The one that &quot;renders&quot; everything</em></p>
  <pre><code>import React from 'react'
  import '../styles/MyWork.css'
  
  import { MyWorkTemplate } from './MyWorkTemplate'
  
  function MyWork() {
    return (
      &lt;section&gt;
        &lt;div&gt;
            &lt;MyWorkTemplate/&gt;
        &lt;/div&gt;
      &lt;/section&gt;
    )
  }
  
  export default MyWork
  </code></pre>
  <p><strong>Component 2:</strong> <em>Where my images are created</em></p>
  <pre><code>import React, {useState} from 'react'
  import { ImageSliderInfo } from './ImageSliderInfo'
  import '../styles/MyWorkTemplate.css'
  
  import {FaArrowCircleRight, FaArrowCircleLeft} from 'react-icons/fa'
  
  
  export const MyWorkTemplate = () =&gt; {
  
      const length = ImageSliderInfo.length;
  
      const [current, setCurrent] = useState(0);
      
      const nextImage = () =&gt; {
          setCurrent(current === length - 1 ? 0 : current + 1)
      }
  
      const previousImage = () =&gt; {
          setCurrent(current === 0 ? length - 1 : current - 1 )
      }
  
      if(!Array.isArray(ImageSliderInfo) || length &lt;= 0){
          return null
      }
  
    return (
      &lt;div className='imageSliderContainer'&gt;
          &lt;FaArrowCircleRight className='rightArrow' onClick={nextImage}/&gt;
          &lt;FaArrowCircleLeft className='leftArrow' onClick={previousImage}/&gt;
          {ImageSliderInfo.map((image, index, key) =&gt; {
              return (
                  &lt;div key={key.imageKey} className={index === current ? 'image active' : 'image'} &gt;
                      {index === current &amp;&amp; (&lt;img src={image.image} alt='travel' className='imageSrc'/&gt;)}
                  &lt;/div&gt;
              )
          })}
      &lt;/div&gt;
  )
  }
  </code></pre>
  <p><strong>Finally, Component 3:</strong> <em>Where the info of the images are stored</em></p>
  <pre><code>import img1 from '../assets/myworkphotos/img1.jpg'
  import img1 from '../assets/myworkphotos/img2.jpg'
  
  
  export const ImageSliderInfo = [
      {
        imageKey : '1546768292',
        image: {img1}
      },
      {
        imageKey : '2414950165',
        image: {img2}
      }
  ]
  </code></pre>
  <p>This is what I have so far, and as mentioned above, whenever I use a link as the <code>image:</code> value in the 3rd component, it works fine.</p>
  <p>I know it's not any of the paths the issue. I also tried using: <code>require({img1})</code>, which worked for like a second before throwing so many errors and warnings to the point I had to restart the entire project (I have no idea what happened).</p>
  <p>I've searched online and tried a few things but ultimately haven't found the answer to anything yet.</p>