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

2024-04-28 • 问答

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

但是，导入后它立即无法使用。我在做什么错了？

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

我找到了解决方法：

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

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',};

export default DEFAULT_IMAGES;

es6-modules import javascript vue.js webpack

本文链接：https://www.f2er.com/3150358.html

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

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

大家都在问