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

我在 Vue.js 项目中作为模块导入导入的图像时遇到问题

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

javascript

import

webpack

vue.js

es6-modules