У меня проблемы с изображениями, импортированными как импорт модулей в проекте Vue.js

Question

В настоящее время у меня есть папка в проекте Vue, в которой содержатся все изображения по умолчанию, которые были использованы в приложении. Путь к папке web/images/defaults/<imageNames>.png. Я могу импортировать изображения на свой компонент, импортируя их по отдельности, например так:

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

Однако я хочу создать файл и добавить изображенияпуть к const переменным и возможность импортировать файл в компонент.

Я попытался:

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

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

export default DEFAULT_IMAGES;

Затем я импортировал его в свой компонент следующим образом:

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

И я попытался v-bind к атрибуту src

<img :src="DEFAULT_IMAGES.imageName1" >

Однако он не работает, как только я импортировал,Что я делаю не так?

Answer 1

Я нашел решение:

Я не указал правильный путь для получения изображений. Первоначально я пытался получить доступ к изображениям в той же папке следующим образом:

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

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

export default DEFAULT_IMAGES;

Однако мне нужно было добавить ./ перед именем изображения, например:

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

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

export default DEFAULT_IMAGES;