javascript - 我在 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;