时间戳

首页 > 解决方案 > 导入图像文件夹

javascript - 导入图像文件夹

问题描述

我有一个 Svelte+Sapper 项目，它工作得很好：

import logotype from 'images/logo_vertical.svg';

[..]

<img src={logotype} alt="..." />

但是是否可以像这样导入整个文件夹：

import logotypes from 'images/logotypes';

..并像这样使用它们：

<img src={logotypes.logo1} alt="..." />

或者

<img src={logotypes['logo1.svg']} alt="..." />

我试过像这样导入，但它不起作用，因为它正在寻找一个模块而不是一组图像：import logotypes from 'images/logotypes';

'images/logotypes' 由 ....svelte 导入，但无法解析 - 将其视为外部依赖项

在运行时...

错误：找不到模块“图像/标识”

标签： javascriptsveltesapper

解决方案

按照你的想法 Julio Malves，这就是我想出的（在 file/images/logos/index.js 中）：

import logo1 from './logo_1.svg'
import logo2 from './logo_2.svg'
import logo3 from './logo_3.svg'
import logo4 from './logo_4.svg'
import logo5 from './logo_5.svg'
import logo6 from './logo_6.svg'

export default {
    logo1,
    logo2,
    logo3,
    logo4,
    logo5,
    logo6,
}

并像使用它一样；

import logos from 'images/logos'

[..]

<img src="{logos.logo1}" alt="[..] />

推荐阅读