目前,我在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" >
但是,导入后无法立即使用。我究竟做错了什么?
我找到了解决方案:
我没有提供获取图像的正确路径。最初,我尝试像这样访问同一文件夹中的图像:
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] 删除。
我来说两句