Как динамически импортировать изображение?

Question

[Enickckey]

Всем привет.
Подскажите пожалуйста, я использую данную библиотеку флагов https://github.com/hampusborgos/country-flags/tree...

У меня есть массив с данными , в которых лежит название изображений.
К примеру
let arr = ["ru","us"]

Мне надо чтобы у меня в цикле выводилось оттуда изображение.
Я использую webpack.
Если я импортирую в начале script
К примеру так
import ru from "svg-country-flags/svg/ru.svg";
То получается сделать так
<img :src='ru'/>

Но не пойму как импортировать в цикле и именно те изображения, которые мне нужны.

Answer 1

[Сергей Соколов]

Модули импортируются статически, ещё до выполнения любого кода.

Есть вариант динамического асинхронного импорта import(moduleName). Но у этого способа главный недостаток: WebPack соберёт в отдельный чанк все файлы с флагами, и бандл будет тяжеловат.

Если хочется красоты, можно заморочиться и дописать модуль, где прописаны импорты и тут же экспорты всех флагов. Типа

import ru from "svg-country-flags/svg/ru.svg";
import ua from "svg-country-flags/svg/ua.svg";
// ...

// и там же экспорты:
export ru;
export ua;
// ...

Тогда достаточно будет одной строкой импортировать нужные флаги import { ru, ua } from './mySuperModule';И Webpack разберётся и включит в бандл только нужное.

Когда напишете такой вспомогательный модуль, отправьте, пожалуйста, pull-request в тот репо.