导入图像文件夹

Question

我有一个 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' is imported by ....svelte, but could not be resolved – treating it as an external dependency

并且在运行时...

Error: Cannot find module 'images/logotypes'

Answer 1

根据 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="[..] />

导入图像文件夹

Import a folder of images

javascript

svelte

sapper