I'm having issues with images imported as module imports in a Vue.js Project

Question

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 web/images/defaults/<imageNames>.png . I'm able import the images on my component by importing them individually like so:

import ImageName from '../../../../../../web/images/defaults/ImageName.png'

However, I want to create a file & add the images path to const variables & being able to import the file in the component.

I have tried:

import imageName1 from 'imageName1.png';
import imageName2 from 'imageName2.png';

const DEFAULT_IMAGES = {
  imageName1:'imageName1',
  imageName2:'imageName2',
};

export default DEFAULT_IMAGES;

Then, I imported it in my component like so:

import DEFAULT_IMAGES from '../../assets/images';

And I tried to v-bind to the src attribute

<img :src="DEFAULT_IMAGES.imageName1" >

However, it's not working as soon as I imported. What am I doing wrong?

Answer 1

I have found the solution:

I didn't include the right path to get the images. Originally, I tried to access the images in the same folder like so:

import imageName1 from 'imageName1.png';
import imageName2 from 'imageName2.png';

const DEFAULT_IMAGES = {
  imageName1:'imageName1',
  imageName2:'imageName2',
};

export default DEFAULT_IMAGES;

However, I needed to add ./ before the image name like so:

import imageName1 from './imageName1.png';
import imageName2 from './imageName2.png';

const DEFAULT_IMAGES = {
  imageName1:'imageName1',
  imageName2:'imageName2',
};

export default DEFAULT_IMAGES;