我在 Vue.js 项目中作为模块导入导入的图像存在问题答案

【问题标题】：I'm having issues with images imported as module imports in a Vue.js Project我在 Vue.js 项目中作为模块导入导入的图像存在问题
【发布时间】：2019-11-06 16:49:16
【问题描述】：

目前，我在 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" >

但是，我一导入它就无法正常工作。我做错了什么？

【问题讨论】：

标签： javascript vue.js webpack import es6-modules

【解决方案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;

【讨论】：