title: I'm having issues with images imported as module imports in a Vue.js Project
body: <p>Currently, I have a folder in a Vue project which contains all my default images that it has been used through the app. The folder path is <strong><code>web/images/defaults/&lt;imageNames&gt;.png</code></strong>. I'm able import the images on my component by importing them individually like so:</p>
  
  <p><strong><code>import ImageName from '../../../../../../web/images/defaults/ImageName.png'</code></strong></p>
  
  <p>However, I want to create a file &amp; add the images path to <code>const</code> variables &amp; being able to import the file in the component.</p>
  
  <p>I have tried:</p>
  
  <pre><code>import imageName1 from 'imageName1.png';
  import imageName2 from 'imageName2.png';
  
  const DEFAULT_IMAGES = {
    imageName1:'imageName1',
    imageName2:'imageName2',
  };
  
  export default DEFAULT_IMAGES;
  </code></pre>
  
  <p>Then, I imported it in my component like so:</p>
  
  <pre><code>import DEFAULT_IMAGES from '../../assets/images';
  </code></pre>
  
  <p>And I tried to <strong><code>v-bind</code></strong> to the <strong><code>src</code></strong> attribute</p>
  
  <pre><code>&lt;img :src="DEFAULT_IMAGES.imageName1" &gt;
  </code></pre>
  
  <p>However, it's not working as soon as I imported. What am I doing wrong?</p>