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

Manuel Abascal

目前,我在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-bindsrc属性

<img :src="DEFAULT_IMAGES.imageName1" >

但是,导入后无法立即使用。我究竟做错了什么?

Manuel Abascal

我找到了解决方案:

我没有提供获取图像的正确路径。最初,我尝试像这样访问同一文件夹中的图像:

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;

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

我分别在python中导入和加载图像数据时遇到问题

Vue在导入highcharts-more时遇到问题

在我的项目中添加货币符号时遇到问题?

我在导入 PyDictionary 库时遇到问题

我在从其他一些 python 包导入 python 模块中的函数时遇到问题

我在尝试将babel安装到我的node.js项目中时遇到问题

如何在 Vue 项目中正确导入 Three.js 模块?

将angular 2模块导入到我的项目中

在我的 Typescript 项目中导入 JS 函数时出现问题

根据我在哪个文件夹中打开 vs 代码,在 VS 代码中打开文件或导入模块时遇到问题

在我的 Gradle Kotlin 项目中配置 protobuf 时遇到问题

我在从MySQL到Java项目中获取数据时遇到问题

我在修改React项目中的svg组件的一些属性值时遇到问题

我在使用ES6导入和导出功能时遇到问题

我在使用带有 Google 表格的 ImportJSON 导入数据时遇到问题

我在获取数据时加入时遇到问题

当我将 vuetify.js 导入我的 Vue 项目时,文本选择颜色变为黑色

在我的 webpack (nuxt) 项目中导入其他模块使用的模块

在 Next JS 中将图像导入我的 CSS(SASS) 文件

我在我的项目 react.js 上运行此代码时遇到问题

我在尝试在IONIC上导入时遇到此错误

从项目模块动态导入Vue CLI

无法在我的 Nuxt 项目中使用“node”命令导入 ES 模块

如何在Flutter中将纯色导入到我的项目中?

我正在尝试在项目中使用redux,但在调用使用调度的函数时遇到问题

如何从Vue + webpack + vue-loader项目中的不同js文件导入函数

我在使用具有路径对象(REACT)的本地 data.json 文件导入 img 时遇到问题

我在 Angular 中创建模块时遇到问题

我在使用 Python Tkinter 模块编码时遇到问题